{% extends 'base.html.twig' %}

{% block title %}Registrieren | Wanted{% endblock %}
{% block header %}{% endblock %}
{% block main_class %}login-screen stitch-page{% endblock %}

{% block body %}
<section class="stitch-auth-wrap">
    <div class="stitch-auth-brand animate-entry-1 in-view">
        <a href="{{ path('app_feed') }}" aria-label="Zum Feed">
            <img src="{{ asset('assets/img/top_logo.png') }}" alt="Wanted Logo">
        </a>
        <h1>Konto erstellen</h1>
        <p>Waehle deinen Weg und werde Teil von Wanted</p>
    </div>

    <section class="login-form-wrap animate-entry-2 in-view">
        <div class="profile-role-toggle">
            <a href="{{ path('app_register', {'role': 'customer'}) }}"
               class="profile-role-btn {% if not is_company %}is-active{% endif %}">
                Als Kunde
            </a>
            <a href="{{ path('app_register', {'role': 'company'}) }}"
               class="profile-role-btn {% if is_company %}is-active{% endif %}">
                Als Unternehmen
            </a>
        </div>

        <form method="post" class="login-form">
            <label class="profile-field">
                <span><i class="fa-solid fa-envelope"></i> E-Mail</span>
                <input type="email" name="email" required autocomplete="email">
            </label>
            <label class="profile-field">
                <span><i class="fa-solid fa-lock"></i> Passwort</span>
                <input type="password" name="password" required autocomplete="new-password">
            </label>

            <div class="login-consent">
                <label>
                    <input type="checkbox" required>
                    <span>Ich akzeptiere die <a href="{{ path('app_privacy') }}" class="text-primary underline" target="_blank" rel="noopener noreferrer">Datenschutzerklaerung</a> und die <a href="{{ path('app_terms') }}" class="text-primary underline" target="_blank" rel="noopener noreferrer">Nutzungsbedingungen</a>.</span>
                </label>
            </div>
            <div class="login-consent">
                <label>
                    <input type="checkbox">
                    <span>Ich moechte Neuigkeiten und Angebote per E-Mail erhalten.</span>
                </label>
            </div>

            <button class="profile-hero-btn primary" type="submit">
                {% if is_company %}Als Unternehmen registrieren{% else %}Als Kunde registrieren{% endif %}
            </button>
        </form>

        <div class="login-links">
            <a href="{{ path('app_login') }}">Schon ein Konto? Hier einloggen</a>
        </div>
    </section>
</section>
{% endblock %}