{% extends 'admin/@layout.html.twig' %}

{% set pageName = 'page_name_template_color'|trans({}, 'admin') %}

{% block content %}
    <div class="row" data-controller="template">
        <div class="col-6 offset-3">
            {{ form_start(form) }}
            <div class="card ">
                <div class="card-header">
                    <div class="row">
                        <div class="col-12">
                            <h5>{{ 'template'|trans({}, 'admin') }}: {{ template.name }}</h5>
                        </div>
                    </div>
                </div>
                <div class="card-body" data-controller="collection">
                    <div class="collection-list mb-5"
                         data-controller="sanitize"
                         data-prototype="{{ _self.printColorRow(form.templateColors.vars.prototype)|e('html_attr') }}"
                         data-index="{{ form.templateColors|length }}"
                    >
                        {% for colorForm in form.templateColors %}
                            {{ _self.printColorRow(colorForm) }}
                        {% endfor %}
                        <div class="alert alert-info {% if form.templateColors|length %}d-none{% endif %}">
                            {{ 'alert_no_color_found_yet'|trans({}, 'admin') }}
                        </div>
                    </div>
                    <button data-action="collection#addRow:prevent" class="btn btn-primary">
                        {{ 'button_add_color'|trans({}, 'admin') }}
                    </button>
                </div>
                <div class="card-footer text-right">
                    <twig:admin:button_save/>
                </div>
            </div>
            {{ form_row(form._token) }}
            {{ form_end(form, {'render_rest': false}) }}
        </div>
    </div>
{% endblock %}

{% macro printColorRow(formColor) %}
    <div class="row collection-item">
        <div class="col-6">
            {{ form_row(formColor.name) }}
        </div>
        <div class="col-5">
            {{ form_row(formColor.value) }}
        </div>
        <div class="col-1 actions">
            <a data-action="collection#removeItem:prevent" class="btn btn-link text-danger collection-remove">
                <i class="fa-solid fa-trash"></i>
            </a>
        </div>
    </div>
{% endmacro %}

{% block body_class %}template-color{% endblock %}