{% extends 'layout/default.html.twig' %}

{% block title %} Signup | Site{% endblock %}

{% block main %}

    <div class="contain:sm">

        <h1 class="mt-30 mb-2">Dans quel genre identifiez-vous ?</h1>

        {{ form_start(form, { 
                'attr' : { 
                    'class': '' 
                } 
            }) 
        }}

            <div class="light p-20 radius">

                {% if not single %}
                    <label for="{{ field_name(form.gender) }}">
                        Vous :
                    </label>
                {% endif %}
                    
                <ul class="naked center middle my-15">

                    <li class="mx-30">
                        <label 
                            class="sl-radio-card"
                        >
                            <img width="85" src="{{ absolute_url(asset('icons/linkedin.svg')) }}" alt="asdf" loading="lazy" decoding="async">
                            <input 
                                type="radio"
                                name="{{ field_name(form.gender) }}"
                                {{ field_value(form.gender) in [1, ''] ? "checked" : "" }}
                                value="1"
                            >
                        </label>
                    </li>

                    <li class="mx-30">
                        <label 
                            class="sl-radio-card"
                        >
                            <img width="85" src="{{ absolute_url(asset('icons/linkedin.svg')) }}" alt="asdf" loading="lazy" decoding="async">
                            <input 
                                type="radio"
                                name="{{ field_name(form.gender) }}"
                                {{ field_value(form.gender) == 2 ? "checked" : "" }}
                                value="2"
                            >
                        </label>
                    </li>
                </ul>

                <label class="flex sm middle fit">
                    Je suis une personne transgenre 
                    <label class="sl-switch">
                        <input type="hidden" name="{{ form.trans.vars.full_name }}" value="0">
                        {{ form_widget(form.trans) }}
                    </label>
                </label>
            </div>

            {% if not single %}

                <div class="light p-20 radius mt-1">

                    <label for="{{ field_name(form.partner.gender) }}">Votre partenaire:</label>
                        
                    <ul class="naked center middle my-15">

                        <li class="mx-30">
                            <label 
                                class="sl-radio-card"
                            >
                                <img width="85" src="{{ absolute_url(asset('icons/linkedin.svg')) }}" alt="asdf" loading="lazy" decoding="async">
                                <input 
                                    type="radio"
                                    name="{{ field_name(form.partner.gender) }}"
                                    {{ field_value(form.partner.gender) in [1, ''] ? "checked" : "" }}
                                    value="1"
                                >
                            </label>
                        </li>

                        <li class="mx-30">
                            <label 
                                class="sl-radio-card"
                            >
                                <img width="85" src="{{ absolute_url(asset('icons/linkedin.svg')) }}" alt="asdf" loading="lazy" decoding="async">
                                <input 
                                    type="radio"
                                    name="{{ field_name(form.partner.gender) }}"
                                    {{ field_value(form.partner.gender) == 2 ? "checked" : "" }}
                                    value="2"
                                >
                            </label>
                        </li>
                    </ul>

                    <label class="flex sm middle fit">
                        Je suis une personne transgenre 
                        <label class="sl-switch">
                            <input type="hidden" name="{{ form.partner.trans.vars.full_name }}" value="0">
                            {{ form_widget(form.partner.trans) }}
                        </label>
                    </label>
                </div>

            {% endif %}

            <div class="fixed-ctas">
                <div class="contain:sm">
                    <button type="submit" class="btn w-100">
                        Suivant
                    </button>
                </div>
            </div>
            
        {{ form_widget(form._token) }}
        {{ form_end(form, {'render_rest': false}) }}

    </div>
    
{% endblock %}