{% import "admin/Macros/Buttons/_button.html.twig" as button %}

{% set langs = getLangs() %}
<div class="row">
    <div class="col-md-12">
        <ul class="nav nav-tabs nav-line-tabs mb-5 fs-6" role="tablist">
            {% for k,lang in langs %}
                <li class="nav-item">
                    <a class="nav-link pl-2 pr-2  {{ k == 0 ? 'active' : '' }}" data-id="lang-{{ lang.shortTitle }}"
                       data-bs-toggle="tab"
                       href="#lang-{{ lang.shortTitle }}" aria-controls="home" role="tab"
                       aria-selected="{{ k == 0 ? 'true' : 'false' }}">{{ lang.shortTitle|upper }}</a>
                </li>

{#                <li class="nav-item">#}
{#                    <a class="nav-link" data-bs-toggle="tab" data-id="{{ section.id }}" href="#page_tab_{{ section.id }}">{{ section.alias }}</a>#}
{#                </li>#}
            {% endfor %}
        </ul>
        <div class="tab-content">
            <div>
                {% set files = [] %}
                {% set langsForImages = [] %}

                {% for lang in project.langs|default %}
                    {% set key = lang.lang.shortTitle %}
                    {% set langsForImages = langsForImages|merge({(key): lang.alt}) %}
                {% endfor %}

                {% for image in project.images|default([]) %}
                    {% if image.name|default %}
                        {% set files = files|merge([{
                            id: image.id,
                            name: image.name,
                            langs: langsForImages,
                            location: asset('media/projects/'~image.name)
                        }]) %}
                    {% endif %}
                {% endfor %}
                {{ include('admin/Common/_dropzone.html.twig', {
                    name: 'image' ~ (project is defined ? project.id : ''),
                    sectionId: (project is defined ? project.id : null),
                    dimensions: '540x540',
                    files: files,
                }, with_context = false) }}
            </div>

            {% for lang in langs %}
                {% set projectLang =  projectLangs[lang.shortTitle]|default %}

                <div class="tab-pane fade {{ loop.first ? 'show active' : '' }}" id="lang-{{ lang.shortTitle }}"
                     aria-labelledby="{{ lang.shortTitle|upper }}-tab" role="tabpanel">
                    <div class="row mb-5">
                        <div class="form-group col-md-12">
                            <label class="form-label" for="title">Başlık</label>
                            <input type="text" id="title" class="form-control form-control-solid" name="langs[{{ lang.shortTitle }}][title]" value="{{ projectLang.title|default }}"  />
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-md-12">
                            <label class="form-label" for="text">Açıklama</label>
                            <textarea id="text{{ lang.id }}" class="tox-target" name="langs[{{ lang.shortTitle }}][text]">{{ projectLang.description|default|raw }}</textarea>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
</div>
<div class="row mb-5">

    <div class="col-lg-6">
        <div class="d-flex flex-stack mt-5">
            <div class="me-5 fw-semibold">
                <label class="fs-6">Durumu</label>
                <div class="fs-7 text-muted">Pasifse görünmeyecektir</div>
            </div>
            <label class="form-check form-switch form-check-custom form-check-solid">
                <input class="form-check-input" type="checkbox" name="settings[enabled]" {{ project.isEnabled|default(project is not defined) ? 'checked' }} />
                <span class="form-check-label fw-semibold text-muted">Aktif</span>
            </label>
        </div>
    </div>
</div>