{% extends "base.html" %}
{% load i18n %}

{% block title %}
    {% if show_archived %}
        {% translate "Archived Questions" %}
    {% else %}
        {% translate "Questions" %}
    {% endif %}
{% endblock %}

{% block content %}
    <div class="page-header">
        <h1>
            {% if show_archived %}
                {% translate "Archived Questions" %}
            {% else %}
                {% translate "Questions" %}
            {% endif %}
        </h1>
    </div>

    <div class="row justify-content-between">
        {% if show_archived %}
            <div class="col-12 col-sm-auto">
                <a class="btn btn-secondary mb-3" href="{% url "questionnaires:question_list" %}">
                    <span class="fa fa-arrow-left"></span>
                    <span>{% translate "Back to active questions" %}</span>
                </a>
            </div>
        {% else %}
            {% if perms.questionnaires.add_question %}
                <div class="col-12 col-sm-auto">
                    <a class="btn btn-secondary mb-3" href="{% url "questionnaires:question_create" %}"><span
                        class="fa fa-plus"></span> <span>{% translate "Add question" %}</span></a>
                </div>
            {% endif %}
            <div class="col-12 col-sm-auto">
                <a class="btn btn-secondary mb-3" href="{% url "questionnaires:question_list_archived" %}">
                    <span>{% translate "Show archived questions" %}</span>
                </a>
            </div>
        {% endif %}
    </div>

    <ul class="list-group mb-3">
        {% for question in question_list %}
            <li class="list-group-item">
                <div class="row mb-0 justify-content-between">
                    <div class="col-12 col-lg-8">
                        <div class="row">
                            <div class="col col-lg-7">
                                <h5 class="mb-0 d-inline">
                                    {{ question.name }}
                                </h5>
                                <br/>
                                <span class="text-muted">{{ question.question_text }}</span>
                            </div>
                            <div class="col-auto col-lg-5">
                                {% if question.type == "text" %}
                                    <span class="fas fa-pencil-alt"></span>
                                {% elif question.type == "single" %}
                                    <span class="fas fa-list"></span>
                                {% elif question.type == "multiple" %}
                                    <span class="fas fa-tasks"></span>
                                {% endif %}
                                {{ question.get_type_display }}
                                <div class="d-none d-lg-inline">
                                    {% if question.required or question.use_saved_answers %}
                                        <br/>
                                    {% endif %}
                                    {% if question.required %}
                                        <span class="badge bg-warning">
                                            {% translate "Answer required" %}
                                        </span>
                                    {% endif %}
                                    {% if question.use_saved_answers %}
                                        <span class="badge bg-info">
                                            {% translate "Uses saved answers" %}
                                        </span>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col d-lg-none">
                        {% if question.required %}
                            <span class="badge bg-warning">
                                {% translate "Answer required" %}
                            </span>
                        {% endif %}
                        {% if question.use_saved_answers %}
                            <span class="badge bg-info">
                                {% translate "Uses saved answers" %}
                            </span>
                        {% endif %}
                    </div>
                    <div class="col-auto d-flex align-items-end align-items-lg-center justify-content-end">
                        {% if show_archived %}
                            <a class="btn btn-secondary btn-sm text-nowrap"
                               href="{% url "questionnaires:question_unarchive" question.pk %}"><span
                                class="fa fa-undo"></span> <span
                                    class="d-none d-md-inline">{% translate "Unarchive" %}</span></a>
                        {% else %}
                            <a class="btn btn-secondary btn-sm text-nowrap"
                               href="{% url "questionnaires:question_edit" question.pk %}"><span
                                class="fa fa-edit"></span> <span
                                    class="d-none d-md-inline">{% translate "Edit" %}</span></a>
                            <a class="btn btn-secondary btn-sm text-nowrap ms-1"
                               href="{% url "questionnaires:question_archive" question.pk %}"><span
                                class="fa fa-archive"></span> <span
                                    class="d-none d-md-inline">{% translate "Archive" %}</span></a>
                            {% if question.can_delete %}
                                <a class="btn btn-secondary btn-sm text-nowrap ms-1"
                                   href="{% url "questionnaires:question_delete" question.pk %}"><span
                                    class="fa fa-trash-alt"></span> <span
                                        class="d-none d-lg-inline">{% translate "Delete" %}</span></a>
                            {% else %}
                                <span data-bs-toggle="tooltip" data-bs-placement="bottom"
                                      title="{% translate "This question cannot be deleted as it is used by at least one shift or answer. You can still archive it." %}">
                                    <a class="btn btn-secondary btn-sm disabled text-nowrap ms-1"
                                       aria-disabled="true"><span
                                        class="fa fa-trash-alt"></span> <span
                                            class="d-none d-lg-inline">{% translate "Delete" %}</span></a>
                                </span>
                            {% endif %}
                        {% endif %}
                    </div>
                </div>
            </li>
        {% empty %}
            {% if show_archived %}
                <em>{% translate "There are no archived questions." %}</em>
            {% else %}
                <em>{% translate "There are no active questions. Use the button above to create one!" %}</em>
            {% endif %}
        {% endfor %}
    </ul>
{% endblock %}