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

{% block title %}New Expert{% endblock %}

{% block body %}
    <div class="container-lg">
        <h1>Create new Expert</h1>

        <div class="m-3 p-3 border rounded border-danger">
            <h2>Ajouter un/des reseaux à un expert :</h2>
            <p>1 - Cliquer sur "<span class="btn border add_item_link bg-primary text-light fs-6 fw-light">Ajouter un reseau</span>" en bas de la page</p>
            <p>2 - Deux champ sont apparues</p>
            <p class="ms-3">le premier pour la plateform : 1 = instagram, 2 = Linkedin, 3 = Facebook</p>
            <p class="ms-3">le deuxième pour l'url de son réseau social</p>
            <p>3 - Vous pouvez ajouter d'autres réseaux sinon cliquer sur "<span class="btn border add_item_link bg-success text-light fs-6 fw-light">Create Expert</span>"</p>
        </div>

        <div class="d-flex flex-column gap-3">
            {{ form_start(form) }}

            {{ form_row(form.name) }}
            {{ form_row(form.metier) }}
            {{ form_row(form.description) }}
            {{ form_row(form.urlWeb) }}
            {{ form_row(form.image) }}

            <ul class="reseau"
                data-index="{{ form.reseau|length > 0 ? form.reseau|last.vars.name + 1 : 0 }}"
                data-prototype="{{ form_widget(form.reseau.vars.prototype)|e('html_attr') }}"
            ></ul>

            <div class="d-inline">
                <div class="d-flex flex-column gap-3 justify-content-start">
                    <button type="button" class="btn border add_item_link bg-primary text-light fs-6 fw-light" data-collection-holder-class="reseau">Ajouter un reseau</button>
                    <button class="btn btn-success fs-6 fw-light" type="submit">Create Expert</button>
                </div>
            </div>

            {{ form_end(form) }}
        </div>

        <a class="btn btn-secondary fs-6 fw-light" href="{{ path('app_expert_index') }}">back to list</a>
    </div>

    <script>
        const addFormToCollection = (e) => {
            const collectionHolder = document.querySelector('.' + e.currentTarget.dataset.collectionHolderClass);

            const item = document.createElement('li');

            item.innerHTML = collectionHolder
                .dataset
                .prototype
                .replace(
                    /__name__/g,
                    collectionHolder.dataset.index
                );

            collectionHolder.appendChild(item);

            collectionHolder.dataset.index++;
        };

        document
            .querySelectorAll('.add_item_link')
            .forEach(btn => {
                btn.addEventListener("click", addFormToCollection)
            });
    </script>
{% endblock %}