{% extends "base.html" %}

{% block title %}Create Group{% endblock %}

{% block content %}
<div class="container">
    <h1 class="mb-4">Create a New Group</h1>
    <form method="POST" enctype="multipart/form-data" id="createGroupForm">
        <div class="mb-3">
            <label for="name" class="form-label">Group Name</label>
            <input type="text" class="form-control" id="name" name="name" required>
        </div>
        <div class="mb-3">
            <label for="description" class="form-label">Description</label>
            <textarea class="form-control" id="description" name="description" rows="3"></textarea>
        </div>
        <div class="mb-3">
            <label for="vanity_url" class="form-label">Vanity URL</label>
            <input type="text" class="form-control" id="vanity_url" name="vanity_url" required>
        </div>
        <div class="mb-3">
            <label for="visibility" class="form-label">Visibility</label>
            <select class="form-select" id="visibility" name="visibility" required>
                <option value="public">Public</option>
                <option value="registered_only">Registered Only</option>
                <option value="invite_only">Invite Only</option>
            </select>
        </div>
        <div class="mb-3 form-check" id="allow_requests_div" style="display: none;">
            <input type="checkbox" class="form-check-input" id="allow_requests" name="allow_requests">
            <label class="form-check-label" for="allow_requests">Allow Join Requests</label>
        </div>
        <div class="mb-3">
            <label for="image" class="form-label">Group Image</label>
            <input type="file" class="form-control" id="image" name="image" accept="image/*">
        </div>
        <div id="cropperContainer" style="display: none;">
            <img id="cropperImage" src="" alt="Group Image">
        </div>
        <input type="hidden" id="croppedData" name="cropped_data">
        <button type="submit" class="btn btn-primary">Create Group</button>
    </form>
</div>
{% endblock %}

{% block styles %}
{{ super() }}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css">
{% endblock %}

{% block scripts %}
{{ super() }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const imageInput = document.getElementById('image');
    const cropperContainer = document.getElementById('cropperContainer');
    const cropperImage = document.getElementById('cropperImage');
    const croppedDataInput = document.getElementById('croppedData');
    let cropper;

    imageInput.addEventListener('change', function(e) {
        const file = e.target.files[0];
        const reader = new FileReader();

        reader.onload = function(event) {
            cropperImage.src = event.target.result;
            cropperContainer.style.display = 'block';

            if (cropper) {
                cropper.destroy();
            }

            cropper = new Cropper(cropperImage, {
                aspectRatio: 1,
                viewMode: 1,
                minCropBoxWidth: 200,
                minCropBoxHeight: 200,
            });
        };

        reader.readAsDataURL(file);
    });

    document.getElementById('createGroupForm').addEventListener('submit', function(e) {
        e.preventDefault();
        if (cropper) {
            croppedDataInput.value = cropper.getCroppedCanvas().toDataURL();
        }
        this.submit();
    });
});
</script>
{% endblock %}