{% extends 'layout/default.html.twig' %}

{% block toolbarActions %}
    <div data-kt-swapper="true" data-kt-swapper-mode="{default: 'prepend', lg: 'prepend'}" data-kt-swapper-parent="{default: '#kt_app_content_container', lg: '#kt_app_toolbar_container'}" class="page-title d-flex flex-column justify-content-center flex-wrap me-3 mb-5 mb-lg-0">
        <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">
            {{ 'translations'|trans({},'cms') }}
        </h1>
    </div>

    <div class="d-flex align-items-center ms-auto">
        <p class="mb-0 small">{{ 'msg_latest_translation'|trans({'%date%': latestTrans|date('Y.m.d. H:i')},'cms') }}</p>

        <div class="bullet bg-secondary h-35px w-1px mx-5"></div>

        <div class="d-flex align-items-center flex-shrink-0">
            <a href="{{ path('lexik_translation_grid') }}" role="button" class="btn btn-primary btn-sm">
                {% include 'utils/_icon.html.twig' with {icon:'setting-4','path':0, 'classes': 'fs-2'} %}
                {{ 'edit'|trans({},'cms') }}
            </a>
        </div>
    </div>
{% endblock toolbarActions %}

{% block body %}
<div class="row g-5 g-xl-10 h-xxl-50 mb-0 mb-xl-10">
    {% for domain in domains %}

        <div class="col-xxl-4 col-sm-6 mb-5 mb-xl-0">
            <div class="card card-flush h-lg-100">
                <div class="card-header pt-7 mb-5">
                    <h3 class="card-title align-items-start flex-column">
                        <span class="card-label fw-bold text-gray-800">{{ domain }}</span>
                        <span class="text-gray-400 mt-1 fw-semibold fs-6">{{ 'available_locales'|trans({'count':locales|length},'cms') }}</span>
                    </h3>

                    <div class="card-toolbar">
                        <a href="{{ path('lexik_translation_grid') }}#?filter[_domain]={{ domain | url_encode }}" class="btn btn-sm btn-light">{{ 'edit'|trans({},'cms') }}</a>
                    </div>
                </div>

                <div class="card-body pt-0">
                    <div class="m-0">
                        {% for locale in locales %}
                            <div class="d-flex flex-stack">
                                <img src="{{ asset('assets/media/flag/'~locale~'.svg') }}" class="me-4 w-20px" style="border-radius: 4px" alt="">

                                <div class="d-flex flex-stack flex-row-fluid d-grid gap-2">
                                    <div class="me-5">
                                        <div class="text-gray-800 fw-bold text-hover-primary fs-7">{{ locale|trans({},'cms') }}</div>
                                    </div>

                                    <div class="d-fle align-items-center">
                                        <div class="progress w-200px">
                                            <div class="progress-bar {{ stats[domain][locale]['completed'] == 100 ? 'bg-success' : 'bg-warning' }}"
                                                 role="progressbar"
                                                 aria-valuenow="{{ stats[domain][locale]['completed'] }}"
                                                 aria-valuemin="0"
                                                 aria-valuemax="100"
                                                 style="width: {{ stats[domain][locale]['completed'] }}%">
                                                {{ stats[domain][locale]['translated'] }} / {{ stats[domain][locale]['keys']|default(0) }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="separator separator-dashed my-3"></div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    {% endfor %}
</div>
{% endblock %}