{% extends "core/disposition/base_participation.html" %}
{% load ephios_crispy %}
{% load crispy_forms_filters %}
{% load user_extras %}
{% load i18n %}

{% block participation_body %}
    <div class="row align-items-start no-gutters mb-0">
        <div class="col-sm pe-3 pt-2 pb-1">
            <h6 class="d-inline">
                {{ form.instance.participant.icon }}
                {{ form.instance.participant }}
            </h6>
            {% with form.instance|conflicting_participations as conflicts %}
                {% if conflicts %}
                    <span class="fa fa-exclamation-triangle text-danger"
                          data-bs-toggle="tooltip"
                          title="{% blocktranslate trimmed with participant=form.instance.participant conflicts=conflicts|join:", " %}
                                  {{ participant }} already participates in {{ conflicts }} at the same time.
                              {% endblocktranslate %}"></span>
                {% endif %}
            {% endwith %}
            {% for qualification in form.instance.participant.qualifications|get_relevant_qualifications %}
                <span class="badge bg-secondary text-dark">{{ qualification }}</span>
            {% endfor %}

            {% block participation_detail %}
            {% endblock %}
        </div>
        <div class="col-sm-auto d-flex justify-content-between align-items-center">
            {% block participation_controls %}
            {% endblock %}
            <button class="btn" type="button" data-bs-toggle="collapse"
                    data-bs-target="#participation-collapse-{{ form.instance.id }}" aria-expanded="false"
                    aria-controls="collapseExample">
                    <span class="{% if form.instance.has_customized_signup %}text-dark{% else %}text-secondary{% endif %}">
                        <i class="fas fa-cog"></i>
                        <i class="fas fa-exclamation{% if not form.instance.has_customized_signup %} invisible{% endif %}"></i>
                    </span>
                <span class="visually-hidden">{% translate "Customize" %}</span>
            </button>
            {% if form.can_delete %}
                <button type="button" class="btn float-end btn-sm ms-3" data-formset-delete-button>
                    <i class="fas fa-times"></i>
                </button>
            {% endif %}
        </div>
    </div>
    <div class="collapse mt-3 do-not-drag card bg-light" data-bs-parent="#participations-form"
         id="participation-collapse-{{ form.instance.id }}">
        <div class="card-body">
            {{ form.individual_start_time|as_crispy_field }}
            {{ form.individual_end_time|as_crispy_field }}
            {% if form.comment.initial %}
                {{ form.comment|as_crispy_field }}
            {% endif %}
            {% block participation_form %}
            {% endblock %}
            <div class="mb-n3"></div>
        </div>
    </div>
{% endblock %}