{% INCLUDECSS '@hucial_antibot/antibot.css' %}
{% INCLUDEJS '@hucial_antibot/antibot.js' %}

{% if S_TYPE == 1 %}
<div class="panel captcha-panel">
    <div class="inner">
        <h3 class="captcha-title">{{ lang('HUCIAL_ANTIBOT_HEADING') }}</h3>
        <fieldset class="fields2">
{% endif %}

<div class="hucial-ab-root"
     data-hucial-antibot-root
     data-moved-keep="{{ lang('HUCIAL_ANTIBOT_SORT_MOVED_KEEP') }}"
     data-moved-reject="{{ lang('HUCIAL_ANTIBOT_SORT_MOVED_REJECT') }}">

    <p class="hucial-ab-intro">{{ lang('HUCIAL_ANTIBOT_EXPLAIN') }}</p>

    <label class="hucial-ab-confirm" for="{{ HUCIAL_AB_CHECKBOX_ID }}">
        <input class="radio" type="checkbox" name="hucial_ab_human" id="{{ HUCIAL_AB_CHECKBOX_ID }}" value="1">
        <span>{{ HUCIAL_AB_LABEL }}</span>
    </label>

    <fieldset class="hucial-ab-sort">
        <legend class="hucial-ab-sort-question">{{ HUCIAL_AB_SORT_QUESTION }}</legend>

        <div class="hucial-ab-sort-fallback" data-hucial-ab-sort-fallback>
            <div class="hucial-ab-fallback-list">
                {% for item in hucial_ab_sort_items %}
                <div class="hucial-ab-fallback-item">
                    <label for="{{ item.FALLBACK_ID }}">{{ item.LABEL }}</label>
                    <select id="{{ item.FALLBACK_ID }}" name="hucial_ab_sort[{{ item.TOKEN }}]" data-hucial-ab-sort-fallback-control>
                        <option value="reject" selected="selected">{{ lang('HUCIAL_ANTIBOT_SORT_REJECT') }}</option>
                        <option value="keep">{{ lang('HUCIAL_ANTIBOT_SORT_KEEP') }}</option>
                    </select>
                </div>
                {% endfor %}
            </div>
        </div>

        <div class="hucial-ab-sort-enhanced" data-hucial-ab-sort-enhanced>
            <div class="hucial-ab-sort-columns" data-hucial-ab-sort>
                <section class="hucial-ab-sort-column">
                    <h4 id="{{ HUCIAL_AB_SORT_KEEP_ID }}" class="hucial-ab-sort-column-title">{{ lang('HUCIAL_ANTIBOT_SORT_KEEP') }}</h4>
                    <div class="hucial-ab-sort-list hucial-ab-sort-list-keep"
                         role="list"
                         data-hucial-ab-sort-list="keep"
                        ></div>
                </section>

                <section class="hucial-ab-sort-column">
                    <h4 id="{{ HUCIAL_AB_SORT_REJECT_ID }}" class="hucial-ab-sort-column-title">{{ lang('HUCIAL_ANTIBOT_SORT_REJECT') }}</h4>
                    <div class="hucial-ab-sort-list"
                         role="list"
                         data-hucial-ab-sort-list="reject"
                        >
                        {% for item in hucial_ab_sort_items %}
                        <div class="hucial-ab-sort-item"
                             role="listitem"
                             draggable="true"
                             data-hucial-ab-sort-item
                             data-hucial-ab-sort-token="{{ item.TOKEN }}"
                             data-hucial-ab-sort-side="reject">
                            <button type="button"
                                    class="button2 hucial-ab-sort-button"
                                    data-hucial-ab-sort-move
                                    data-label="{{ item.LABEL }}"
                                    data-action-keep="{{ lang('HUCIAL_ANTIBOT_SORT_MOVE_KEEP') }}"
                                    data-action-reject="{{ lang('HUCIAL_ANTIBOT_SORT_MOVE_REJECT') }}">
                                <span class="hucial-ab-sort-label">{{ item.LABEL }}</span>
                            </button>
                            <input type="hidden"
                                   name="hucial_ab_sort[{{ item.TOKEN }}]"
                                   value="reject"
                                   disabled="disabled"
                                   data-hucial-ab-sort-value>
                        </div>
                        {% endfor %}
                    </div>
                </section>
            </div>
        </div>

        <div id="{{ HUCIAL_AB_SORT_STATUS_ID }}" class="sr-only" aria-live="polite" aria-atomic="true" data-hucial-ab-sort-status></div>
    </fieldset>

    <details class="hucial-ab-details">
        <summary>{{ lang('HUCIAL_ANTIBOT_DETAILS_SUMMARY') }}</summary>
        <div class="hucial-ab-details-content">
            <p>{{ lang('HUCIAL_ANTIBOT_DETAILS_TEXT') }}</p>
            <p>{{ lang('HUCIAL_ANTIBOT_SORT_EXPLAIN') }}</p>
            <p class="hucial-ab-sort-fallback" data-hucial-ab-sort-fallback>{{ lang('HUCIAL_ANTIBOT_SORT_FALLBACK_EXPLAIN') }}</p>
            <p class="hucial-ab-sort-enhanced" data-hucial-ab-sort-enhanced>{{ lang('HUCIAL_ANTIBOT_SORT_ENHANCED_EXPLAIN') }}</p>
        </div>
    </details>
</div>

<div aria-hidden="true" style="position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important;">
    <label for="{{ HUCIAL_AB_HP_ID }}">{{ lang('HUCIAL_ANTIBOT_TRAP_LABEL') }}</label>
    <input type="text" name="{{ HUCIAL_AB_HP_NAME }}" id="{{ HUCIAL_AB_HP_ID }}" value="" tabindex="-1" autocomplete="off">
</div>

<input type="hidden" name="hucial_ab_id" value="{{ HUCIAL_AB_ID }}">
<input type="hidden" name="hucial_ab_sig" value="{{ HUCIAL_AB_SIG }}">
<input type="hidden" name="hucial_ab_pow" value="" data-hucial-antibot-pow>
<span hidden data-hucial-antibot-challenge data-nonce="{{ HUCIAL_AB_NONCE }}" data-difficulty="{{ HUCIAL_AB_DIFFICULTY }}" data-pow-mode="{{ HUCIAL_AB_POW_MODE }}"></span>

<noscript>
    {% if HUCIAL_AB_POW_MODE == 2 %}
        <p>{{ lang('HUCIAL_ANTIBOT_NOJS_REQUIRED') }}</p>
    {% else %}
        <p>{{ lang('HUCIAL_ANTIBOT_NOJS_NOTE') }}</p>
    {% endif %}
</noscript>

{% if S_TYPE == 1 %}
        </fieldset>
    </div>
</div>
{% endif %}