{% extends '__layout__.html' %}
{% block title %}Create Group{% endblock %}
{% block head %}
<style>
    .group-bg {
        background-color: rgb(30,30,30);
    }
    .text-secondary {
        color: rgb(200,200,200) !important;
    }
    .bg-drop {
        box-shadow: 0px 0px 10px 0px rgb(0,0,0,0.5);
    }
    h5 {
        font-size: 15px;
        margin-bottom: 5px !important;
    }
</style>
{% endblock %}
{% block content %}
<div class="ms-auto me-auto ps-2 pe-2 mb-3" style="width: 700px;min-height: 100vh;margin-top: 120px;">
    <h2>Create Group</h2>
    <div class="linebreak"></div>
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
        <div>
        {% for category, message in messages %}
            {% if category == 'error': %}
            <div class="alert border p-2 text-center alert-danger border-danger">
                {{ message }}
            </div>
            {% endif %}
            {% if category == 'success': %}
            <div class="alert border p-2 text-center alert-success border-success">
                {{ message }}
            </div>
            {% endif %}
        {% endfor %}
        </div>
        {% endif %}
    {% endwith %}
    <form method="post" action="/groups/create" enctype="multipart/form-data">
        <div class="mt-2">
            <h5 class="mb-1">Group Name</h5>
            <input type="text" name="name" class="form-control" placeholder="Name" required>
        </div>
        <div class="mt-3">
            <h5 class="mb-1">Group Description</h5>
            <textarea name="description" class="form-control" placeholder="Description" style="height: 100px" required></textarea>
        </div>
        <div class="mt-3">
            <h5 class="mb-1">Group Icon</h5>
            <input type="file" name="icon" class="form-control" required>
            <p class="text-secondary m-0 mt-1" style="font-size: 12px;">File must be less than 2MB, Has to be a PNG, Must have a 1:1 ratio and be between 128x128 to 1024x1024</p>
        </div>
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <div class="d-flex w-100 justify-content-end">
            <button type="submit" class="btn btn-light mt-3 ms-auto">Create R$100</button>
        </div>
    </form>
</div>
{% endblock %}