{% extends "core/disposition/base_participation.html" %}
{% load user_extras %}
{% load ephios_crispy %}
{% load i18n %}
{% block body %}
    <h6 class="mb-0">
        <div class="row align-items-center no-gutters">
            <div class="col-8 d-flex pe-3">
                <div class="pe-1">
                    {{ form.instance.participant.icon }}
                    {{ form.instance.participant }}
                    {% if form.preferred_section %}
                        <small class="text-muted">
                            <br> {% translate "prefers" %}
                            {{ form.preferred_section.title }}
                        </small>
                    {% endif %}
                </div>
                <div>
                    {% with form.instance.participant|conflicting_shifts:shift as conflicting_shifts %}
                        {% if conflicting_shifts %}
                            <span class="fa fa-exclamation-triangle text-danger"
                                  data-bs-toggle="tooltip"
                                  title="{% blocktranslate trimmed with participant=form.instance.participant conflicts=conflicting_shifts|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">{{ qualification }}</span>
                    {% endfor %}
                </div>
            </div>
            <div class="col-4 d-flex justify-content-between align-items-center">
                {% crispy_field form.section label_class="d-none" wrapper_class="d-inline-block mb-0" %}

                {% if form.can_delete %}
                    <button type="button" class="btn float-end btn-sm ms-1" data-formset-delete-button>
                        <i class="fas fa-times"></i>
                    </button>
                {% endif %}
            </div>
        </div>
    </h6>
{% endblock %}