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

{% block stylesheets %}
    {{ encore_entry_link_tags('protagonist') }}

    {{ parent() }}
{% endblock %}

{% block headline %}
    {% if protagonist.getId is not null %}
        Figur bearbeiten
    {% else %}
        Neue Figur erstellen
    {% endif %}
{% endblock %}

{% block body %}
    <div class="d-flex">
        <div class="bg-main my-5 flex-fill p-5 pb-3">
            {{ form_start(form) }}
                {% for message in app.flashes('success') %}
                    <div class="alert alert-success">
                        {{ message }}
                    </div>
                {% endfor %}

                {% for message in form_errors(form) %}
                    <div class="alert alert-success">
                        {{ message }}
                    </div>
                {% endfor %}

                {{ form_row(form.name) }}
                {{ form_row(form.birthYear) }}
                {{ form_row(form.description) }}
                {{ form_row(form.gender) }}
                {{ form_row(form.race) }}

                <div class="image-upload-container row m-0 my-5"
                     data-index="{{ form.images|length }}"
                     data-preview='<div class="col-6 col-md-4 col-lg-3 col-xxl-2 image-preview p-0" id="image-preview-__name__">
                            <img class="" alt="Vorschau" src="{{ asset('uploads/images/__image__') }}">

                           <div class="select-as-main p-3" data-name="__name__" id="select-as-main-__name__">
                                <i class="fa-solid fa-star fa-2x"></i>
                            </div>

                            <div class="clear-image p-3" data-name="__name__">
                                <i class="fa-solid fa-trash fa-2x"></i>
                            </div>

                            {{ form_widget(form.images.vars.prototype)|e('html_attr') }}
                        </div>'>

                    {% for imageForm in form.images %}
                        <div class="col-6 col-md-4 col-lg-3 col-xxl-2 image-preview p-0" id="image-preview-{{ imageForm.vars.name }}">
                            <img class="" alt="Vorschau" src="{{ asset('uploads/images/' ~ imageForm.vars.value.image) }}">

                            <div class="select-as-main {% if imageForm.vars.value.isMainImage %}selected{% endif %} p-3"
                                 data-name="{{ imageForm.vars.name }}"
                                 id="select-as-main-{{ imageForm.vars.name }}"
                            >
                                <i class="fa-solid fa-star fa-2x"></i>
                            </div>

                            <div class="clear-image p-3"
                                 data-name="{{ imageForm.vars.name }}"
                            >
                                <i class="fa-solid fa-trash fa-2x"></i>
                            </div>

                            {{ form_widget(imageForm) }}
                        </div>
                    {% endfor %}

                    <div class="col-6 col-md-4 col-lg-3 col-xxl-2 image-add p-0">
                        <p class="text-center position-relative top-50 translate-middle-y">
                            <i class="fa-solid fa-plus"></i><br>
                            <span class="d-none d-md-block">Bild hochladen (max 3MB)</span>
                        </p>
                    </div>
                </div>

                {{ form_row(form.submit) }}

            {{ form_end(form) }}

            {{ form(imageUploadForm) }}
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}

    {{ encore_entry_script_tags('protagonist') }}
{% endblock %}