{% load signal_extras %}
{% load event_extras %}
{% load guardian_tags %}
{% load utils %}
{% load static %}
{% load i18n %}
{% load humanize %}

{% if request.user|can_do_disposition_for:shift %}
    {% url "core:shift_disposition" shift.pk as disposition_url %}
{% endif %}

{# the popover html needs to stay with the shift box, #}
{# as it might be rendered outside of the event detail view #}
<div id="statsexplainer-popover-title-{{ shift.id }}" class="d-none"></div>
<div id="statsexplainer-popover-content-{{ shift.id }}" class="d-none">
    <i class="far fa-circle text-body-secondary"></i>
    {% translate "participants needed" %}
    <br>
    <i class="far fa-check-circle text-body-secondary"></i>
    {% translate "enough participants" %}
    <br/>
    <i class="fa fa-check-circle text-body-secondary"></i>
    {% translate "full" %}
    <br/>
    <i class="far fa-question-circle text-body-secondary"></i>
    {% translate "unit optional" %}
</div>

<div id="shift-{{ shift.pk }}" class="card h-100 shift_box">
    {% setvar request|participation_from_request:shift as participation %}
    {% include "core/fragments/shift_header.html" with shift=shift participation=participation %}
    <div class="card-header">
        {% if shift.label %}
            <span class="fw-bold card-title text-body-secondary mb-0">
                <i class="fas fa-tag"></i> {{ shift.label }}
            </span>
        {% endif %}
        {% with stats=shift.get_signup_stats %}
            <span class="text-body-secondary float-end"
                  data-bs-container="body"
                  data-bs-toggle="popover"
                  data-bs-trigger="hover"
                  data-bs-placement="right"
                  data-bs-content-ref="#statsexplainer-popover-content-{{ shift.id }}"
                  data-bs-title-ref="#statsexplainer-popover-title-{{ shift.id }}"
            >
                <i class="fas fa-users"></i>
                <strong>{{ stats.confirmed_count }}{% if stats.full_count %}/{{ stats.full_count }}{% endif %}</strong>
                <span>
                    {% if not stats.has_free %}
                        <i class="fa fa-check-circle"></i>
                    {% elif not stats.missing %}
                        <i class="far fa-check-circle"></i>
                    {% else %}
                        <i class="far fa-circle "></i>
                    {% endif %}
                </span>
            </span>
        {% endwith %}
    </div>
    <div class="card-body">
        {% include shift.structure with own_participation=participation %}
        <div class="shift-plugin-content">
            {% collect_insert_html_signal "shift_info" shift=shift %}
        </div>
    </div>

    <div class="card-footer no-print">
        {% with can_sign_up=request|can_sign_up:shift can_decline=request|can_decline:shift can_customize_signup=request|can_customize_signup:shift %}
            <div class="row gy-1">
                {% if can_sign_up or can_decline or can_customize_signup %}
                    <div class="col-auto order-1">
                        <form method="POST" class="form" id="signup-form-{{ shift.pk }}"
                              action="{{ request|reverse_signup_action:shift }}">
                            {% csrf_token %}
                            {# Sentinel value to bypass signup form #}
                            <input type="hidden" name="quick_action" value="1">
                            {% if can_sign_up and can_customize_signup %}
                                <div class="btn-group">
                                    <button type="submit" name="signup_choice" value="sign_up"
                                            class="btn btn-success">{{ shift.signup_flow.registration_button_text }}</button>
                                    <a class="btn btn-success" href="{{ request|reverse_signup_action:shift }}">
                                        <i class="fas fa-cog"></i>
                                        <span class="visually-hidden">{% translate "Customize" %}</span>
                                    </a>
                                </div>
                            {% elif can_sign_up and not can_customize_signup %}
                                <button type="submit" name="signup_choice" value="sign_up"
                                        class="btn btn-success">{{ shift.signup_flow.registration_button_text }}</button>
                            {% elif not can_sign_up and can_customize_signup %}
                                <a class="btn btn-secondary"
                                   href="{{ request|reverse_signup_action:shift }}">{% translate "Customize" %}</a>
                            {% endif %}
                            {% if can_decline %}
                                <span class="d-inline-block" tabindex="1">
                                    <button type="submit" name="signup_choice" value="decline"
                                            class="btn btn-secondary">
                                        {% translate "Decline" %}
                                    </button>
                                </span>
                            {% endif %}
                        </form>
                    </div>
                {% endif %}

                <div class="col-auto ms-auto order-3">
                    <span class="float-end">
                        {% if can_change_event %}
                            {% shift_plugin_actions shift request as plugin_actions %}
                            {% for plugin_action in plugin_actions %}
                                <a href="{{ plugin_action.url }}"
                                   class="btn btn-outline-info">{{ plugin_action.label }}</a>
                            {% endfor %}
                        {% endif %}

                        {% if disposition_url %}
                            <a href="{{ disposition_url }}"
                               class="btn btn-info">{% translate "Disposition" %}</a>
                        {% endif %}
                    </span>
                </div>

                <div class="d-flex align-items-center col-12 order-4{% if not can_sign_up and not can_decline and not can_customize_signup or not disposition_url %} col-md order-md-2{% endif %}">
                    <div>
                        {% if can_sign_up and shift.signup_flow.configuration.signup_until %}
                            <span class="text-success" data-bs-toggle="tooltip" data-bs-placement="top"
                                  title="{{ shift.signup_flow.configuration.signup_until|date:'SHORT_DATETIME_FORMAT' }}">
                                {% translate "Signup ends" %}
                                {{ shift.signup_flow.configuration.signup_until | naturaltime }}.
                            </span>
                        {% endif %}
                        {% if not can_sign_up or not can_decline %}
                            <span class="text-body-secondary">
                                {% for error in request|signup_action_errors:shift %}
                                    {{ error.message }}
                                {% endfor %}
                            </span>
                        {% endif %}
                    </div>
                </div>
            </div>
        {% endwith %}
    </div>
</div>