{% load event_extras %}
{% load event_extras %}
{% load static %}
{% load i18n %}
{% load humanize %}

<div id="shift-{{ shift.pk }}" class="card h-100">
    <div class="card-header d-flex">

        {% setvar request|participation_from_request:shift as participation %}
        {% with mannequin=participation|participation_mannequin_style style=participation|participation_css_style %}
            <div class="mannequin mannequin-{{ mannequin }}">
                <img src="{% static 'ephios/img/mannequin_'|add:mannequin|add:'.svg' %}"
                     alt="{{ mannequin }} mannequin icon"/>
            </div>
            <div class="lh-1 ms-2 flex-grow-1">
                <small class="fw-bold">
                    {% if participation.start_time|date:"SHORT_DATE_FORMAT" != shift.start_time|date:"SHORT_DATE_FORMAT" and participation.is_in_positive_state %}
                        <span class="text-{{ style }}" data-bs-toggle="tooltip" data-bs-placement="top"
                              title="{% translate "originally" %} {{ shift.start_time|date:"l" }}, {{ shift.start_time|date:"SHORT_DATE_FORMAT" }}">
                              {{ participation.start_time|date:"l" }}, {{ participation.start_time|date:"SHORT_DATE_FORMAT" }}
                        </span>
                    {% else %}
                        {{ shift.start_time|date:"l" }}, {{ shift.start_time|date:"SHORT_DATE_FORMAT" }}
                    {% endif %}
                </small>
                <br/>
                <span class="fw-bold fs-2">
                        {% if participation.individual_start_time and participation.is_in_positive_state %}
                            <span class="text-{{ style }}" data-bs-toggle="tooltip" data-bs-placement="bottom"
                                  title="{% translate "originally" %} {{ shift.start_time|time }}">{{ participation.start_time|time }}</span>
                        {% else %}
                            {{ shift.start_time|time }}
                        {% endif %}
                    -
                    {% if participation.individual_end_time and participation.is_in_positive_state %}
                        <span class="text-{{ style }}" data-bs-toggle="tooltip" data-bs-placement="bottom"
                              title="{% translate "originally" %} {{ shift.end_time|time }}">{{ participation.end_time|time }}</span>
                    {% else %}
                        {{ shift.end_time|time }}
                    {% endif %}
                    </span>
                <small class="fw-bold text-muted d-inline-block">
                    <span class="d-inline-block">
                        {{ shift.meeting_time|time }} {% translate "Meetup" %}
                    </span>
                </small>
            </div>
        {% endwith %}

        {% if "change_event" in event_perms %}
            <div class="dropstart">
                <button class="btn" type="button" id="actionDropdownButton"
                        data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="fas fa-ellipsis-v"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="actionDropdownButton">
                    <li><a class="dropdown-item" href="{% url "core:shift_edit" shift.pk %}"><span
                            class="fas fa-edit"></span>
                        {% trans "Edit" %}</a></li>
                    {% if shift.event.shifts.count > 1 %}
                        <a class="dropdown-item" href="{% url "core:shift_delete" shift.pk %}"><span
                                class="fas fa-trash-alt"></span> {% trans "Delete" %}</a>
                    {% endif %}
                </ul>
            </div>
        {% endif %}
    </div>

    <div class="card-body">
        {% include shift.signup_method with own_participation=participation %}
    </div>

    <div class="card-footer">
        {% if event.active %}
            {% with can_sign_up=request|can_sign_up:shift can_decline=request|can_decline:shift can_customize_signup=request|can_customize_signup:shift %}
                <form method="POST" class="form"
                      action="{{ request|reverse_signup_action:shift }}">

                    {# If signup form is invalid, provide the shift times as initial values by including them in post data. #}
                    <input type="hidden" name="individual_start_time_0" value="{{ shift.start_time|date:"Y-m-d" }}">
                    <input type="hidden" name="individual_start_time_1" value="{{ shift.start_time|time:"H:i" }}">
                    <input type="hidden" name="individual_end_time_0" value="{{ shift.end_time|date:"Y-m-d" }}">
                    <input type="hidden" name="individual_end_time_1" value="{{ shift.end_time|time:"H:i" }}">

                    {% csrf_token %}
                    {% if can_sign_up and shift.signup_method.configuration.signup_until %}
                        <div class="text-success mb-1">
                            <span data-bs-toggle="tooltip" data-bs-placement="top"
                                  title="{{ shift.signup_method.configuration.signup_until|date:'SHORT_DATETIME_FORMAT' }}">
                                {% translate "Signup ends" %}
                                {{ shift.signup_method.configuration.signup_until | naturaltime }}.
                            </span>
                        </div>
                    {% elif not can_sign_up or not can_decline %}
                        <div class="text-muted mb-1">
                            {% for error in request|signup_errors:shift %}
                                <span>{{ error.message }}</span>
                            {% endfor %}
                        </div>
                    {% endif %}
                    {% 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_method.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_method.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">
                                {% trans "Decline" %}
                            </button>
                        </span>
                    {% endif %}
                </form>
            {% endwith %}
        {% endif %}
    </div>
</div>
