{% extends '@Communication/communication/layout.html.twig' %}

{% block communication_title %}Ajouter un compte de réseau social{% endblock %}
{% block communication_header %}{% endblock %}

{% block communication_content %}
{% set platforms = {
    linkedin: {label:'LinkedIn', icon:'mdi:linkedin'},
    instagram: {label:'Instagram', icon:'mdi:instagram'},
    facebook: {label:'Facebook', icon:'mdi:facebook'},
    twitter: {label:'X (Twitter)', icon:'ri:twitter-x-fill'},
    threads: {label:'Threads', icon:'simple-icons:threads'},
    tiktok: {label:'TikTok', icon:'ic:baseline-tiktok'},
    youtube: {label:'YouTube', icon:'mdi:youtube'},
    pinterest: {label:'Pinterest', icon:'mdi:pinterest'},
    generic: {label:'Autre réseau', icon:'solar:global-broken'}
} %}
<div class="csocial csocial-new" data-controller="communication-social-account">
    <header class="csocial-topbar is-back">
        <div class="csocial-breadcrumb">
            <a href="{{ path('communication_social_account_index') }}">
                <iconify-icon icon="solar:arrow-left-linear"></iconify-icon>
                Retour aux comptes
            </a>
            <span>/</span>
            <strong>Ajouter un compte</strong>
        </div>
    </header>

    <main class="csocial-new-body">
        <section class="csocial-new-heading capsule-heading">
            <div class="capsule-heading-main"><span class="capsule-heading-icon"><i class="ti ti-link-plus"></i></span>
            <div class="capsule-heading-content">
                <h1 class="capsule-heading-title">Ajouter un compte de réseau social</h1>
                <p class="capsule-heading-subtitle">Sélectionnez la plateforme, puis renseignez le nom du compte et son adresse publique.</p>
            </div>
            </div>
        </section>

        <ol class="csocial-steps" aria-label="Étapes d’ajout">
            <li class="is-active"><b>1</b><span>Informations du compte</span></li>
            <li><i></i></li>
            <li><b>2</b><span>Vérification de l’adresse</span></li>
            <li><i></i></li>
            <li><b>3</b><span>Compte ajouté</span></li>
        </ol>

        <form class="csocial-form" method="post" novalidate data-action="submit->communication-social-account#prepareUrl">
            <input type="hidden" name="_token" value="{{ csrf_token('communication_social_account_new') }}">

            <header>
                <i><iconify-icon icon="solar:user-plus-bold-duotone"></iconify-icon></i>
                <div>
                    <h2>Informations du compte</h2>
                    <p>Ces informations permettront d’identifier facilement ce compte lors de la préparation de vos publications.</p>
                </div>
            </header>

            <div class="csocial-form-body">
                {% if errors %}
                    <div class="csocial-form-alert" role="alert">
                        <iconify-icon icon="solar:danger-triangle-linear"></iconify-icon>
                        <div><strong>Le compte n’a pas pu être ajouté.</strong><span>Vérifiez les informations indiquées ci-dessous.</span></div>
                    </div>
                {% endif %}

                <fieldset class="csocial-platform-choice {{ errors.platform|default(null) ? 'has-error' }}">
                    <legend>Plateforme <b>*</b></legend>
                    <div>
                        {% for value, platform in platforms %}
                            <label class="is-{{ value }}">
                                <input type="radio" name="account[platform]" value="{{ value }}" required
                                       {{ input.platform == value ? 'checked' }}
                                       data-communication-social-account-target="platformInput"
                                       data-action="change->communication-social-account#platformChanged">
                                <span>
                                    <i><iconify-icon icon="{{ platform.icon }}"></iconify-icon></i>
                                    <strong>{{ platform.label }}</strong>
                                    <iconify-icon class="csocial-platform-check" icon="solar:check-circle-bold"></iconify-icon>
                                </span>
                            </label>
                        {% endfor %}
                    </div>
                    {% if errors.platform|default(null) %}
                        <small>{{ errors.platform }}</small>
                    {% else %}
                        <small>Sélectionnez le réseau social auquel appartient ce compte.</small>
                    {% endif %}
                </fieldset>

                <label class="{{ errors.name|default(null) ? 'has-error' }}">
                    <span>Nom du compte <b>*</b></span>
                    <div class="csocial-input">
                        <iconify-icon icon="solar:user-id-linear"></iconify-icon>
                        <input type="text" name="account[name]" value="{{ input.name }}" maxlength="180" required
                               placeholder="Ex. Capsule — Page officielle"
                               autocomplete="organization"
                               data-communication-social-account-target="nameInput"
                               data-action="input->communication-social-account#preview">
                    </div>
                    {% if errors.name|default(null) %}<small>{{ errors.name }}</small>{% else %}<small>Utilisez un nom clair pour le retrouver rapidement.</small>{% endif %}
                </label>

                <label class="{{ errors.url|default(null) ? 'has-error' }}">
                    <span>URL du compte <b>*</b></span>
                    <div class="csocial-input">
                        <iconify-icon icon="solar:link-linear"></iconify-icon>
                        <input type="text" inputmode="url" name="account[url]" value="{{ input.url }}" maxlength="500" required
                               placeholder="https://www.linkedin.com/company/capsule"
                               autocomplete="url"
                               data-communication-social-account-target="urlInput"
                               data-action="input->communication-social-account#preview blur->communication-social-account#normalizeUrl">
                    </div>
                    {% if errors.url|default(null) %}<small>{{ errors.url }}</small>{% else %}<small>Collez l’adresse publique complète du profil ou de la page.</small>{% endif %}
                </label>

                <aside class="csocial-preview">
                    <span class="csocial-label">Aperçu</span>
                    <div>
                        <i data-communication-social-account-target="previewIcon">
                            <iconify-icon icon="solar:global-broken"></iconify-icon>
                        </i>
                        <p>
                            <strong data-communication-social-account-target="previewName">{{ input.name ?: 'Nom de votre compte' }}</strong>
                            <span data-communication-social-account-target="previewUrl">{{ input.url ?: 'L’adresse du compte apparaîtra ici' }}</span>
                        </p>
                        <em data-communication-social-account-target="previewPlatform">Réseau détecté automatiquement</em>
                    </div>
                </aside>
            </div>

            <footer>
                <a href="{{ path('communication_social_account_index') }}">Annuler</a>
                <button class="csocial-primary-button capsule-button capsule-button--primary" type="submit">
                    <iconify-icon icon="solar:add-circle-linear"></iconify-icon>
                    Ajouter le compte
                </button>
            </footer>
        </form>

        <aside class="csocial-info-banner">
            <i><iconify-icon icon="solar:shield-check-bold-duotone"></iconify-icon></i>
            <div>
                <strong>Aucune connexion à la plateforme</strong>
                <p>Nous enregistrons uniquement l’adresse publique. Aucun accès à votre compte, mot de passe ou autorisation n’est nécessaire.</p>
            </div>
            <span><iconify-icon icon="solar:check-circle-linear"></iconify-icon>Simple et sécurisé</span>
        </aside>
    </main>
</div>
{% endblock %}