{% extends "jury/base.html.twig" %}

{% set origclar = list|first %}
{% set claimed = not origclar.answered and origclar.from_jurymember is defined %}

{% block title %}Clarification {{ origclar.clarid }} - {{ parent() }}{% endblock %}

{% block extrahead %}
    {{ parent() }}
{% endblock %}

{% block content %}
    <div class="container clarificationform">
        {% if claimed %}
            <div class="alert alert-info" role="alert">
                <i class="fas fa-user-lock"></i> Claimed by <strong>{{ origclar.from_jurymember }}</strong>
                {% if origclar.jurymember_is_me %}(it's you!){% endif %}
            </div>
        {% endif %}

        {% for clar in list %}
            <div class="card mb-3 {% if clar.from_team is not defined %}border-primary{% endif %}">
                <div class="card-header">
                    <div class="row">
                        <div class="col-sm">
                            Clarification {{ clar.clarid }}
                            {% if showExternalId %}
                                (external ID: {{ clar.externalid }})
                            {% endif %}
                        </div>
                        <div class="col-sm text-muted text-end">{{ clar.time | printtimeHover(clar.contest) }}</div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="card-title">
                        <div class="row">
                            <div class="col-sm">
                                From:
                                {% if clar.from_team is defined %}
                                    <a href="{{ path('jury_team', {teamId: clar.from_team.teamid}) }}">{{ clar.from_teamname }} {{ clar.from_team | entityIdBadge('t') }}</a>
                                {% else %}
                                    Jury
                                    {% if clar.from_jurymember is defined %}
                                        ({{ clar.from_jurymember }})
                                    {% endif %}
                                {% endif %}
                            </div>

                            <div class="col-sm">
                                <label for="subselect">Subject:</label>
                                <span class="clarification-subject">
                                    {% if clar.subjectlink is defined %}
                                        <a href="{{ clar.subjectlink }}">{{ clar.subject }}</a>
                                    {% else %}
                                        {{ clar.subject }}
                                    {% endif %}
                                    <button class="btn btn-sm btn-link clarification-subject-change-button">
                                        <i class="far fa-edit" title="Change subject"></i>
                                    </button>
                                </span>
                                <span class="clarification-subject-form" data-current-selected-subject="{{ clar.categoryid }}" data-clarification-id="{{clar.clarid}}">
                                    <form action="{{ path('jury_clarification_change_subject', {'clarId': clar.clarid }) }}" method="post" class="d-flex">
                                        <select name="subject" class="subject form-select form-select-sm w-auto" id="subselect">
                                            {% for contest,subject in subjects %}
                                                <optgroup label="{{ contest }}">
                                                {% for id,descr in subject %}
                                                    <option value="{{id}}"{% if clar.categoryid == id %} selected{% endif %}>{{descr}}</option>
                                                {% endfor %}
                                                </optgroup>
                                            {% endfor %}
                                        </select>
                                        <button type="button" class="btn-close clarification-subject-cancel-button ms-2 w-auto" aria-label="Cancel"></button>
                                    </form>
                                </span>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm">To:
                                {% if clar.to_team is defined %}
                                    <a href="{{ path('jury_team', {teamId: clar.to_team.teamid}) }}">{{ clar.to_teamname }} {{ clar.to_team | entityIdBadge('t') }}</a>
                                {% elseif clar.from_team is defined %}
                                    Jury
                                {% else %}
                                    <strong>All</strong>
                                {% endif %}
                            </div>

                            <div class="col-sm">
                                <label for="qselect">Queue:</label>
                                <span class="clarification-queue">
                                    {{ clar.queue }}
                                    <button class="btn btn-sm btn-link clarification-queue-change-button"><i class="far fa-edit" title="Change queue"></i></button>
                                </span>
                                <span class="clarification-queue-form" data-current-selected-queue="{{ clar.queueid }}" data-clarification-id="{{clar.clarid}}">
                                    <form action="{{ path('jury_clarification_change_queue', {'clarId': clar.clarid }) }}" class="d-flex" method="post">
                                        <select name="queue" class="queue form-select w-auto form-select-sm" id="qselect">
                                            <option value="unassigned">Unassigned issues</option>
                                            {% for qid,queue in queues %}
                                                <option value="{{qid}}"{% if clar.queueid == qid %} selected{% endif %}>{{queue}}</option>
                                            {% endfor %}
                                            </select>
                                        <button type="button" class="btn-close clarification-queue-cancel-button ms-2 w-auto" aria-label="Cancel"></button>
                                    </form>
                                </span>
                            </div>

                        </div>
                    </div>

                    <hr/>

                    <div class="card-text">{{ clar.body | markdown_to_html | sanitize_html('app.clarification_sanitizer') }}</div>

                </div>
            </div>

        {% endfor %}

        <div class="knoppenbalk">
            <div class="row">
                <div class="col-sm">
                    <button class="btn btn-secondary btn-sm" data-bs-toggle="collapse" data-bs-target="#collapsereplyform" aria-expanded="false" aria-controls="collapsereplyform">
                        <i class="fa fa-reply"></i> reply
                    </button>
                </div>

                <div class="col-sm text-center">
                    <form action="{{ path('jury_clarification_claim', {'clarId': origclar.clarid}) }}" method="post">
                        {% if claimed %}
                            {% if origclar.jurymember_is_me %}
                                <button class="btn btn-sm btn-outline-success" name="claimed" value="0" type="submit"><i class="fas fa-lock-open"></i> unclaim</button>
                            {% else %}
                                <button class="btn btn-sm btn-outline-success" name="claimed" value="1" type="submit"><i class="fas fa-user-secret"></i> steal</button>
                            {% endif %}
                        {% else %}
                            <button class="btn btn-sm btn-success" name="claimed" value="1" type="submit" {% if origclar.answered %}disabled{% endif %}>
                                <i class="fas fa-lock"></i> claim
                            </button>
                        {% endif %}
                    </form>
                </div>

                <div class="col-sm text-end">
                    <form action="{{ path('jury_clarification_set_answered', {'clarId': origclar.clarid}) }}" method="post">
                        {% if origclar.answered %}
                            <button class="btn btn-sm btn-outline-warning" name="answered" value="0" type="submit">
                                <i class="fas fa-times"></i> set unanswered
                            </button>
                        {% else %}
                            <button class="btn btn-sm btn-warning" name="answered" value="1" type="submit">
                                <i class="fas fa-check"></i> set answered
                            </button>
                        {% endif %}
                    </form>
                </div>

            </div>
        </div>
    </div>

    <div class="mt-4 collapse {% if not form.vars.valid %}show{% endif%} container clarificationform" id="collapsereplyform">
        <div class="card">
            <div class="card-header">Send clarification</div>
            <div class="card-body">
                {%- include 'jury/partials/clarification_form.html.twig' %}
            </div>
        </div>
    </div>

    <div class="mb-5"></div>
{% endblock %}

{% block extrafooter %}
<script>
    $(function() {
        $(['subject', 'queue']).each(function(_, field) {
            $('.clarification-' + field + '-change-button').on('click', function () {
                $(this).closest('.clarification-' + field).hide();
                $(this).closest('div').find('.clarification-' + field + '-form').show();
            });
            $('.clarification-' + field + '-cancel-button').on('click', function () {
                $(this).closest('.clarification-' + field + '-form').hide();
                $(this).closest('div').find('.clarification-' + field).show();
            });
            $('.clarification-' + field + '-form select').on('change', function () {
                var $select = $(this);
                var $form = $select.closest('.clarification-' + field + '-form');
                var clarId = $form.data('clarification-id');
                var value = $select.find(':selected').text();
                if (confirm('Are you sure you want to change the ' + field + ' of clarification ' + clarId + ' to "' + value + '"?')) {
                    $form.find('form').submit();
                } else {
                    $select.val($form.data('current-selected-' + field));
                }
            });
        });
        $('#clar_answers').change(clarificationAppendAnswer);

        setupPreviewClarification($('#jury_clarification_message') , $('#messagepreview'), true);
     });
</script>
{% endblock %}