{% extends "MasterOrdenadoresTaller/MenuBgTemplate.html.twig" %}

{% block bodyHeaderOptions %}
    {{ parent() }}
    {% set pageData = fsc.getPageData() %}
    {% set firstView = fsc.views | first %}
    <div class="kanban-header">
        <div class="row g-3">
            {# -- Top left buttons -- #}
            <div class="col-md-8 mb-2">
                <div class="btn-group">
                    <a href="{{ firstView.model.url('list') }}" class="btn btn-sm btn-phoenix-secondary">
                        <i class="fas fa-list fa-fw" aria-hidden="true"></i>
                        <span class="d-none d-lg-inline-block">{{ trans('all') }}</span>
                    </a>
                    <a href="{{ firstView.model.url('edit') }}" class="btn btn-sm btn-phoenix-secondary"
                       title="{{ trans('refresh') }}">
                        <i class="fas fa-redo" aria-hidden="true"></i>
                    </a>
                </div>
                {# -- Options button -- #}
                {{ _self.optionsButton(fsc, firstView, i18n) }}
                {# -- New button -- #}
                {% if fsc.hasData and firstView.settings.btnNew %}
                    <a href="{{ firstView.model.url('new') }}" class="btn btn-sm btn-phoenix-secondary">
                        <i class="fas fa-plus fa-fw" aria-hidden="true"></i>
                        <span class="d-none d-lg-inline-block">{{ trans('new') }}</span>
                    </a>
                {% endif %}
                {# -- Action buttons -- #}
                {{ firstView.getRow('actions').renderTop() | raw }}
                {# -- Print button -- #}
                {% if fsc.hasData and firstView.settings.btnPrint %}
                    {{ _self.printButton(fsc, firstView, i18n) }}
                {% endif %}
            </div>
            {# -- Top right text -- #}
            <div class="col-md d-md-inline-block text-end">
                <h1 class="h4 mb-0">{{ trans(pageData.title) }}
                    {% set image = fsc.getImageUrl() %}
                    {% if image is empty %}
                        <i class="{{ pageData.icon }} fa-3x pl-3 float-right fs-8" aria-hidden="true"></i>
                    {% else %}
                        <img src="{{ image }}" alt="{{ fsc.title }}" class="img-thumbnail ml-3 mb-2 float-right"/>
                    {% endif %}
                </h1>
                {% if fsc.hasData %}
                    <p class="text-info mb-0">{{ firstView.model.primaryDescription() | raw }}</p>
                {% else %}
                    <p class="text-info mb-0">{{ trans('new') }}</p>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}

{% block body %}
    {% set firstView = fsc.views | first %}
    <div class="kanban-header">
        <div class="row gx-6 gy-3 align-items-top">
            {# -- Left Panel -- #}
            {% if fsc.views | length > 1 %}
                <div class="col-lg-2 pe-0">
                    {# -- Left tabs -- #}
                    <div class="nav nav-pills flex-row flex-lg-column pb-3" id="mainTabs" role="tablist">
                        {% for viewName, view in fsc.views %}
                            {% set active = (viewName == fsc.active) ? ' active' : '' %}
                            {% set disable = view.settings.active ? '' : ' disabled' %}
                            <a class="nav-link{{ active }}{{ disable }} ps-0 pe-0" id="{{ viewName }}-tab" data-bs-toggle="pill"
                               href="#{{ viewName }}" role="tab" aria-controls="{{ viewName }}" aria-expanded="true">
                                <i class="{{ view.icon }} me-1 fa-fw mr-1 d-none d-xl-inline-block"
                                   aria-hidden="true"></i>{{ view.title }}
                                {% if view.count >= 1 and viewName != firstView.getViewName() %}
                                    <span class='badge badge-secondary mt-lg-1 mb-lg-1 float-lg-right'>{{ view.count }}</span>
                                {% endif %}
                            </a>
                        {% endfor %}
                    </div>
                </div>
            {% endif %}
            {# -- Right Panel -- #}
            {% set rightPanelClass = (fsc.views | length > 1) ? 'col-lg-10' : 'col' %}
            <div class="{{ rightPanelClass }}">
                {# -- Tab content -- #}
                <div class="tab-content" id="mainTabsContent">
                    {% for viewName, view in fsc.views %}
                        {% set active = (viewName == fsc.active) ? ' show active' : '' %}
                        <div class="tab-pane fade{{ active }}" id="{{ viewName }}" role="tabpanel"
                             aria-labelledby="{{ viewName }}-tab">
                            {% do fsc.setCurrentView(viewName) %}
                            {{ include(view.template) }}
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        $(document).ready(function () {
            if (window.disableAutoFocus === true) {
                return;
            }
            if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) == false) {
                $("input:visible,textarea:visible").filter(":not([readonly='readonly']):not([disabled='disabled']):not([type='hidden']):not([type='checkbox']):not([type='radio'])").first().focus();
            }
        });
    </script>
{% endblock %}

{% macro optionsButton(fsc, firstView, i18n) %}
    {% set show = false %}
    {% for viewName, view in fsc.views %}
        {% if view.settings.active and view.columns is not empty %}
            {% set show = true %}
        {% endif %}
    {% endfor %}
    {% if show and firstView.settings.btnOptions %}
        <div class="btn-group">
            <div class="dropdown">
                <button class="btn btn-sm btn-phoenix-secondary mr-3 dropdown-toggle" type="button" data-bs-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false">
                    <i class="fas fa-wrench fa-fw" aria-hidden="true"></i>
                    <span class="d-none d-lg-inline-block">{{ trans('options') }}</span>
                </button>
                <div class="dropdown-menu">
                    <h6 class="dropdown-header">{{ trans('options-button-header') }}</h6>
                    {% for viewName, view in fsc.views %}
                        {% if view.settings.active and view.columns is not empty %}
                            <a class="dropdown-item"
                               href="EditPageOption?code={{ viewName }}&url={{ firstView.model.url() | url_encode }}">
                                <i class="{{ view.icon }} fa-fw" aria-hidden="true"></i> {{ view.title }}
                                {% if view.settings.customized %}
                                    <i class="fas fa-user-pen ml-2" title="{{ trans('personalized') }}"></i>
                                {% endif %}
                            </a>
                        {% endif %}
                    {% endfor %}
                </div>
            </div>
        </div>
    {% endif %}
{% endmacro %}

{% macro printButton(fsc, firstView, i18n) %}
    <div class="btn-group">
        <a href="{{ firstView.model.url() }}&action=export&option={{ fsc.exportManager.defaultOption() }}"
           target="_blank" class="btn btn-sm btn-phoenix-secondary">
            <i class="fas fa-print fa-fw" aria-hidden="true"></i>
            <span class="d-none d-lg-inline-block">{{ trans('print') }}</span>
        </a>
        <button type="button" class="btn btn-sm btn-phoenix-secondary dropdown-toggle dropdown-toggle-split"
                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="sr-only">{{ trans('more') }}</span>
        </button>
        <div class="dropdown-menu dropdown-menu-right">
            {% for key, option in fsc.exportManager.options() %}
                {% if key != fsc.exportManager.defaultOption() %}
                    <a href="{{ firstView.model.url() }}&action=export&option={{ key }}" class="dropdown-item">
                        <i class="{{ option.icon }} fa-fw" aria-hidden="true"></i>
                        {{ trans(option.description) }}
                    </a>
                {% endif %}
            {% endfor %}
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item" data-bs-toggle="modal" data-target="#advancedExportModal">
                <i class="fas fa-tools fa-fw" aria-hidden="true"></i>
                {{ trans('advanced') }}
            </a>
            {% set tools = fsc.exportManager.tools() %}
            {% if tools is not empty %}
                <div class="dropdown-divider"></div>
                {% for key, tool in tools %}
                    <a href="{{ tool.link }}" target="_blank" class="dropdown-item">
                        <i class="{{ tool.icon }} fa-fw" aria-hidden="true"></i>
                        {{ trans(tool.description) }}
                    </a>
                {% endfor %}
            {% endif %}
        </div>
    </div>
    <form action="{{ firstView.model.url() }}" method="post" target="_blank" onsubmit="animateSpinner('add')">
        <input type="hidden" name="action" value="export"/>
        <div class="modal fade" id="advancedExportModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">
                            <i class="fas fa-tools fa-fw" aria-hidden="true"></i>
                            {{ trans('advanced') }}
                        </h5>
                        <button type="button" class="close btn" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body text-left">
                        <div class="form-group">
                            <select name="option" class="form-control">
                                {% for key, option in fsc.exportManager.options() %}
                                    <option value="{{ key }}">{{ trans(option.description) }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="form-group">
                            {{ trans('format') }}
                            <select name="idformat" class="form-control">
                                <option value="">{{ trans('default') }}</option>
                                <option value="">------</option>
                                {% for format in fsc.exportManager.getFormats(firstView.model) %}
                                    <option value="{{ format.id }}">{{ format.nombre }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="form-group">
                            {{ trans('language') }}
                            <select name="langcode" class="form-control">
                                <option value="">{{ trans('default') }}</option>
                                <option value="">------</option>
                                {% for code, lang in i18n.getAvailableLanguages() %}
                                    <option value="{{ code }}">{{ lang }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="text-right">
                            <button type="submit" class="btn btn-primary">
                                {{ trans('accept') }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
{% endmacro %}