{% extends 'squads/base.html' %}
{% load i18n %}
{% load humanize %}
{% load static %}

{% block squads_menu %}
    {% include 'squads/menu.html' with owner=owner %}
{% endblock %}

{% block squads_block %}
{% include "squads/modals/manage/cancel_request.html" %}
{% include "squads/modals/manage/leave_request.html" %}

<div class="card-title bg-primary rounded-top px-2"><h3>{% translate "Group" %}: {{ group.name }}</h3></div>
<div class="card-body">
    {{ group.safe_description|safe }}
    <hr>
    {% if not pending_application and not membership and filter_req %}
        <form method="post" action="{% url 'squads:apply_group' group_id=group.id %}" class="d-flex align-items-end" style="gap: 0.5rem;">
            {% csrf_token %}
            <div class="mr-2">
                {{ comment_form.comment }}
            </div>
            <button type="submit" name="join_group" class="btn btn-primary">{% translate "Apply" %}</button>
        </form>
    {% else %}
        {% if pending_application %}
            <div class="d-flex justify-content-start gap-2">
                <button type="button" class="btn btn-warning" disabled>{% translate "Pending Application" %}</button>
                <button type="button" data-group-id="{{ group.id }}" class="btn btn-danger cancel-request-btn">{% translate "Cancel Request" %}</button>
            </div>
            <br>
            {% translate 'You Applied since' %} {{ pending_application.created_at|naturaltime }}
        {% endif %}
        {% if membership %}
            <div class="d-flex justify-content-start gap-2">
                <button type="button" class="btn btn-success" disabled>{% translate "Active Membership" %}</button> <br><br>
                <button type="button" data-group-id="{{ group.id }}" class="btn btn-danger leave-request-btn">{% translate "Leave Squad" %}</button>
            </div>
            <br>
            {% translate 'You Joined since' %} {{ membership.joined_at|naturaltime }}

        {% endif %}
    {% endif %}
    {% if not filter_req %}
        <button type="button" class="btn btn-warning" disabled>{% translate "Missing requirements" %}</button> <br>
    {% endif %}
</div>
{% endblock %}

{% block squads_block_extra %}
{% if missing_req %}
    <br>
    <div class="card">
        <div class="card-header bg-warning text-white">{% translate "Missing Requirements" %}</div><br>
        <ul>
            {% for req_list in missing_req %}
                {% for req in req_list %}
                    <li>{{ req.type }}: {{ req.name|safe }} {{ req.amount }}</li>
                {% endfor %}
            {% endfor %}
        </ul>
    <div>
{% endif %}
{% endblock %}

{% block extra_javascript %}
<script>
document.addEventListener('DOMContentLoaded', function () {
    $('.cancel-request-btn').on('click', function () {
        var groupId = $(this).data('group-id');
        $('#modal-button-confirm-cancel-request').attr('data-group-id', groupId);
        $('#squads-request-cancel').modal('show');
    });

    $('.leave-request-btn').on('click', function () {
        var groupId = $(this).data('group-id');
        $('#modal-button-confirm-leave-request').attr('data-group-id', groupId);
        $('#squads-request-leave').modal('show');
    });
});
</script>
{% endblock %}
