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

{% block title %}Color Schema{% endblock %}

{% block body %}
    <div class="container color-schema-page">
        <a  href="{{ path('application') }}">

            <img class="mt-7" src="{{ logo(app.request.attributes.get('instance')) }}" height="50"
                 alt="{{ app.request.attributes.get('instance') | capitalize }}">

        </a>
        <div class="card mt-10">
            <div class="card-body p-5">
                {{ form_start(form) }}
                <div class="col-12 px-0 py-3  ">
                    <div class="d-flex flex-column flex-md-row">
                        <div class="col-12 col-md-4 text-center">
                            {{ form_label(form.instance) }}
                            {{ form_widget(form.instance) }}
                        </div>

                        <div class="col-12 col-md-4 text-center">
                            {{ form_label(form.logo) }}
                            {{ form_widget(form.logo) }}
                        </div>
                        <div class="col-12 col-md-4 text-center">
                            {{ form_label(form.icon) }}
                            {{ form_widget(form.icon) }}
                        </div>


                    </div>

                    <div class="d-flex flex-column flex-md-row mt-3">
                        <div class="col-12 col-md-4 text-center">
                            {{ form_label(form.customCSS) }}
                            {{ form_widget(form.customCSS) }}
                        </div>
                        <div class="col-8">
                            {{ form_label(form.primaryColor) }}
                            <div class="color-picker">
                                {{ form_widget(form.primaryColor) }}
                            </div>
                        </div>

                        <div class="col-12 col-md-4 d-none">
                            {{ form_label(form.secondaryColor) }}
                            <div class="color-picker">
                                {{ form_widget(form.secondaryColor) }}
                            </div>
                        </div>

                        <div class="col-12 col-md-4 d-none">
                            {{ form_label(form.light) }}
                            <div class="color-picker">
                                {{ form_widget(form.light) }}
                            </div>
                        </div>
                    </div>

                    <div class="d-flex flex-column flex-md-row mt-3">
                        <div class="col-12 col-md-6 d-none">
                            {{ form_label(form.info) }}
                            <div class="color-picker">
                                {{ form_widget(form.info) }}
                            </div>
                        </div>

                        <div class="col-12 col-md-6 d-none">
                            {{ form_label(form.dark) }}
                            <div class="color-picker">
                                {{ form_widget(form.dark) }}
                            </div>
                        </div>
                    </div>

                    <div class="d-flex flex-column flex-md-row mt-3">
                        <div class="col-12 col-md-4 d-none">
                            {{ form_label(form.success) }}
                            <div class="color-picker">
                                {{ form_widget(form.success) }}
                            </div>
                        </div>

                        <div class="col-12 col-md-4 d-none">
                            {{ form_label(form.warning) }}
                            <div class="color-picker">
                                {{ form_widget(form.warning) }}
                            </div>
                        </div>

                        <div class="col-12 col-md-4 d-none">
                            {{ form_label(form.danger) }}
                            <div class="color-picker">
                                {{ form_widget(form.danger) }}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 mt-3">
                    {{ form_widget(form.save) }}
                </div>
                {{ form_end(form) }}
            </div>
        </div>
    </div>
{% endblock %}