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

{% block title %}Register Account{% endblock %}

{% block extrahead %}
    {{ parent() }}
    {{ macros.select2_extrahead() }}
    <link rel="stylesheet" href="{{ asset('style_login.css') }}">
{% endblock %}

{% block body %}
<main>
    <div style="text-align: center;">
        <img class="mb-4" src="{{ asset('images/DOMjudgelogo.svg') }}" alt="DOMjudge" width="72">
    </div>
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                {% block messages %}
                    {% include 'partials/messages.html.twig' %}
                {% endblock %}
            </div>
        </div>
    </div>
        {{ form_start(registration_form, { 'attr': {'class': 'form-signin'} }) }}
        <h1 class="h3 mb-3 fw-normal">Register Account</h1>
        <div class="mb-2">
            Enter the following information to register your account with DOMjudge.
        </div>
        {# Form elements will be rendered automatically #}
        {{ form_end(registration_form) }}
        <div class="mt-3">
            Already have an account?<br/>
            <a href="{{ path('login') }}">Login</a>.
        </div>
</main>
{% endblock %}

{% block extrafooter %}
    <script>
        $(function () {
            $('#user_registration_existingAffiliation').select2();

            var $affiliationRadios = $('[name="user_registration[affiliation]"]');

            if ($affiliationRadios.length) {
                $affiliationRadios.on('change', function () {
                    var $affiliationNameGroup = $('#user_registration_affiliationName').closest('div');
                    var $affiliationShortNameGroup = $('#user_registration_affiliationShortName').closest('div');
                    var $affiliationCountryGroup = $('#user_registration_affiliationCountry').closest('div');
                    var $existingAffiliationGroup = $('#user_registration_existingAffiliation').closest('div');
                    var value = $affiliationRadios.filter(':checked').val();

                    switch (value) {
                        case 'none':
                            $affiliationNameGroup.hide();
                            $affiliationShortNameGroup.hide();
                            $affiliationCountryGroup.hide();
                            $existingAffiliationGroup.hide();
                            break;
                        case 'new':
                            $affiliationNameGroup.show();
                            $affiliationShortNameGroup.show();
                            $affiliationCountryGroup.show();
                            $existingAffiliationGroup.hide();
                            break;
                        case 'existing':
                            $affiliationNameGroup.hide();
                            $affiliationShortNameGroup.hide();
                            $affiliationCountryGroup.hide();
                            $existingAffiliationGroup.show();
                            break;
                    }
                });

                var $checkedRadio = $affiliationRadios.filter(':checked');
                if ($checkedRadio.length === 0) {
                    $affiliationRadios.first().prop('checked', true);
                }

                $affiliationRadios.change();
            }
        });
    </script>

    {% include 'jury/partials/country_select.html.twig' with {field: '#user_registration_affiliationCountry'} %}
{% endblock %}
