{% extends "jury/base.html.twig" %}
{% import "jury/jury_macros.twig" as macros %}

{% block title %}Configure external contest - {{ parent() }}{% endblock %}

{% block extrahead %}
    {{ parent() }}
    {{ macros.select2_extrahead() }}
{% endblock %}

{% block content %}

    <h1>Configure external contest</h1>

    <div class="row">
        <div class="col-lg-4">
            {{ form_start(form) }}
            {{ form_row(form.type) }}
            {{ form_row(form.source) }}
            <div data-type-ccs-api>
                {{ form_row(form.username) }}
                <div class="mb-3">
                    {{ form_label(form.password) }}
                    <div class="input-group">
                        {{ form_widget(form.password) }}
                        <button class="btn btn-outline-secondary" type="button" id="show-hide-password-button">
                            <i class="fa fa-eye"></i>
                        </button>
                    </div>
                    {{ form_help(form.password) }}
                </div>
            </div>
            {{ form_row(form.save) }}
            {{ form_end(form) }}
        </div>
    </div>

    <script>
        $(function () {
            var type = $('#external_contest_source_type');
            var typeChanged = function () {
                var ccsApiFields = $('[data-type-ccs-api]');
                switch (type.val()) {
                    case '{{ constant('\App\\Entity\\ExternalContestSource::TYPE_CCS_API') }}':
                        ccsApiFields.show();
                        break;
                    default:
                        ccsApiFields.hide();
                        break;
                }
            };
            type.on('change', typeChanged);
            typeChanged();

            var $passwordField = $('#external_contest_source_password');
            $passwordField.attr('type', 'password');

            $('#show-hide-password-button').on('click', function() {
                if ($passwordField.attr('type') === 'password') {
                    $passwordField.attr('type', 'text');
                    $('i', $(this)).attr('class', 'fa fa-eye-slash');
                } else {
                    $passwordField.attr('type', 'password');
                    $('i', $(this)).attr('class', 'fa fa-eye');
                }
            });
        })
    </script>

{% endblock %}