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

{% block title %}Color Schemas{% endblock %}

{% block body %}

    <div class="container">

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

                <div class="card mt-10">
                    <div class="card-header p-2 d-flex justify-content-between align-items-center">
                        <div>
                            <h1 class="m-0 pl-5">Color configuration</h1>
                        </div>
                        <div>
                            <a href="{{ path('admin_color_schema_create',{instance:app.request.get('instance')}) }}"
                               class="btn btn-icon btn-light btn-hover-primary btn-lg"><span class="svg-icon svg-icon-primary svg-icon-2x m-0"><!--begin::Svg Icon | path:/var/www/preview.keenthemes.com/metronic/releases/2020-08-03-114926/theme/html/demo3/dist/../src/media/svg/icons/Navigation/Plus.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect fill="#000000" x="4" y="11" width="16" height="2" rx="1"/>
        <rect fill="#000000" opacity="0.3" transform="translate(12.000000, 12.000000) rotate(-270.000000) translate(-12.000000, -12.000000) " x="4" y="11" width="16" height="2" rx="1"/>
    </g>
</svg><!--end::Svg Icon--></span></a>
                        </div>
                    </div>

                    <div class="card-body p-3">
                        <table class="table m-0">

                            <thead>

                            <tr>

                                <th>Icon</th>

                                <th>Instance</th>

                                <th>Primary Color</th>

                                <th>Logo</th>

                                <th class="text-right">Actions</th>
                            </tr>

                            </thead>

                            <tbody>

                            {% for colorSchema in colorSchemas %}

                                <tr>
                                    <td class="align-middle"><img src="{{ colorSchema.icon }}" alt="Logo" width="50px"></td>
                                    <td class="align-middle">
                                        {{ colorSchema.instance }}
                                    </td>


                                    <td class="align-middle">

                                        <div class="rounded-circle"
                                             style="width: 30px;height: 30px;background-color: {{ colorSchema.primaryColor }}"></div>

                                    </td>


                                    <td class="align-middle"><img src="{{ colorSchema.logo }}" alt="Logo" width="100px"></td>

                                    <td class="text-right align-middle">
                                        <a href="{{ path('admin_color_schema_update',{id: colorSchema.id,instance:app.request.get('instance')}) }}"
                                           class="btn btn-icon btn-light btn-hover-warning" data-toggle="tooltip" title="Edit">
                                                <span class="svg-icon svg-icon-warning svg-icon-2x m-0"><!--begin::Svg Icon | path:/var/www/preview.keenthemes.com/metronic/releases/2020-08-03-114926/theme/html/demo3/dist/../src/media/svg/icons/Design/Edit.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect x="0" y="0" width="24" height="24"/>
        <path d="M8,17.9148182 L8,5.96685884 C8,5.56391781 8.16211443,5.17792052 8.44982609,4.89581508 L10.965708,2.42895648 C11.5426798,1.86322723 12.4640974,1.85620921 13.0496196,2.41308426 L15.5337377,4.77566479 C15.8314604,5.0588212 16,5.45170806 16,5.86258077 L16,17.9148182 C16,18.7432453 15.3284271,19.4148182 14.5,19.4148182 L9.5,19.4148182 C8.67157288,19.4148182 8,18.7432453 8,17.9148182 Z" fill="#000000" fill-rule="nonzero" transform="translate(12.000000, 10.707409) rotate(-135.000000) translate(-12.000000, -10.707409) "/>
        <rect fill="#000000" opacity="0.3" x="5" y="20" width="15" height="2" rx="1"/>
    </g>
</svg><!--end::Svg Icon--></span>
                                        </a>
                                        <a href="{{ path('admin_color_schema_delete',{id: colorSchema.id,instance:app.request.get('instance')}) }}"
                                           class="btn btn-icon btn-light btn-hover-danger" data-toggle="tooltip" title="Delete">
                                                <span class="svg-icon svg-icon-danger svg-icon-2x m-0"><!--begin::Svg Icon | path:/var/www/preview.keenthemes.com/metronic/releases/2020-08-03-114926/theme/html/demo3/dist/../src/media/svg/icons/Navigation/Close.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g transform="translate(12.000000, 12.000000) rotate(-45.000000) translate(-12.000000, -12.000000) translate(4.000000, 4.000000)" fill="#000000">
            <rect x="0" y="7" width="16" height="2" rx="1"/>
            <rect opacity="0.3" transform="translate(8.000000, 8.000000) rotate(-270.000000) translate(-8.000000, -8.000000) " x="0" y="7" width="16" height="2" rx="1"/>
        </g>
    </g>
</svg><!--end::Svg Icon--></span>
                                        </a>
                                    </td>
                                </tr>


                            {% endfor %}

                            </tbody>

                        </table>
                    </div>
                </div>

    </div>

{% endblock %}