{% extends 'layouts/app.twig' %}
{% import 'macros/base.twig' as m %}
{% import 'macros/form.twig' as f %}

{% block title %}
    {% if is_admin | default(false) %}
        {{ __('question.admin') }}
    {% else %}
        {{ __('question.questions') }}
    {% endif %}
{% endblock %}

{% block contact_options %}
    {% for name,opt in config('contact_options') %}
        {% set url = opt is iterable ? opt[0] : opt %}
        {% set permission = opt is iterable ? opt[1] : null %}
        {% if not permission or has_permission_to(permission) %}
            <a href="
            {%- if url starts with '/' %}
                {{ url(url) }}
            {%- else -%}
                {{ url }}
            {%- endif %}"
            {%- if not (url starts with '/') %}
                target="_blank" rel="noopener"
            {%- endif %}>
                {{ __(name) }}
            </a>{% if not loop.last %},{% endif %}
        {% endif %}
    {% endfor %}
{% endblock %}

{% block content %}
    <div class="container">
        <div class="page-header">
            <h1>
                {{ block('title') }}
                {% if is_admin | default(false) %}
                    {{ m.button(m.icon('question-lg'), url('/faq'), 'secondary', null, __('faq.faq')) }}
                {% else %}
                    {{ m.button(m.icon('plus-lg'), url('/questions/new'), 'secondary') }}
                {% endif %}
            </h1>
        </div>

        {% include 'layouts/parts/messages.twig' %}

        <div class="row">
            {% block row %}
                <div class="col-md-12">
                    {% block questions %}
                        {% block faq_text %}
                            {% if has_permission_to('faq.view') %}
                                {% if not is_admin | default(false) %}
                                    <p>
                                        {{ __('question.faq_link', [url('/faq')]) | raw }}
                                    </p>
                                {% endif %}
                            {% endif %}
                        {% endblock %}
                        {%- block info_text %}
                            {% if config('contact_options') and not is_admin|default(false) %}
                                <p>
                                    {{ m.info(__('question.contact_options') ~ block('contact_options'), true) }}
                                </p>
                            {% endif %}
                        {% endblock %}

                        {% for question in questions %}
                            <div class="row mb-4">
                                <div class="col-md-12">
                                    <div class="card {% if theme.type =='light' %}bg-light{% else %}bg-secondary{% endif %}">
                                        <div class="card-body bg-body">
                                            {{ question.text|nl2br }}
                                        </div>

                                        <div class="card-footer {{ m.type_bg_class() }} d-flex align-items-center">
                                            <div class="me-3">
                                                {{ m.icon('clock') }} {{ question.created_at.format(__('general.datetime')) }}
                                            </div>

                                            {% if has_permission_to('question.edit') %}
                                                {{ m.user(question.user, {'pronoun': true}) }}
                                            {% endif %}

                                            <div class="d-flex ms-auto">
                                                {% if has_permission_to('question.edit') %}
                                                    {{ m.button(m.icon('pencil'), url('/admin/questions/' ~ question.id), null, 'sm', __('form.edit')) }}
                                                {% endif %}

                                                {% if question.user.id == user.id or has_permission_to('question.edit') %}
                                                    <form class="ps-1" method="post" action="">
                                                        {{ csrf() }}
                                                        {{ f.hidden('id', question.id) }}
                                                        {{ f.delete(null, {
                                                            'size': 'sm',
                                                            'confirm_title': __('question.delete.title', [question.text[:40]|e]),
                                                            'confirm_button_text': __('form.delete'),
                                                        }) }}
                                                    </form>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {% if question.answer %}
                                    <div class="col-md-11 offset-md-1 mt-3">
                                        <div class="card bg-info">
                                            <div class="card-body bg-body {{ m.type_text_class() }}">
                                                {{ question.answer|markdown }}
                                            </div>
                                            <div class="card-footer {{ m.type_bg_class() }} d-flex align-items-center {{ m.type_text_class() }}">
                                                <div class="me-3">
                                                    {{ m.icon('clock') }} {{ question.updated_at.format(__('general.datetime')) }}
                                                </div>
                                                {{ m.user(question.answerer, {'pronoun': true}) }}
                                            </div>
                                        </div>
                                    </div>
                                {% endif %}
                            </div> <!-- row -->
                        {% endfor %}
                    {% endblock %}
                </div>
            {% endblock %}
        </div>
    </div>
{% endblock %}