{% extends "admin/base.html.twig" %}

{% trans_default_domain 'admin' %}

{% import 'core/src-macro.html.twig' as resources %}

{% block title %}{{ "Blibliothèque d'icônes"|trans }}{% endblock %}
{% block pageTitle %}{{ "Blibliothèque d'icônes"|trans }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    {{ resources.encore_absolute_link_tags('admin-icons-library', 'admin') }}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ resources.encore_entry_js_files('admin-icons-library', 'admin', 'Libraries') }}
{% endblock %}

{% block body %}

    <div class="card">

        <ul class="nav nav-tabs customtab large" role="tablist">
            {% for param, libraryName in libraries %}
                {% if param != 'fontawesome' and param != 'fontawesome5' %}
                    {% if param == 'custom' %}
                        <li class="nav-item">
                            <a href="https://fontawesome.com/icons"
                               class="nav-link" target="_blank">
                                <span class="d-none d-sm-inline-block">Font Awesome</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="https://www.toptal.com/designers/htmlarrows"
                               class="nav-link" target="_blank">
                                <span class="d-none d-sm-inline-block">Symbols</span>
                            </a>
                        </li>
                    {% endif %}
                    <li class="nav-item">
                        <a href="{{ path("admin_icons", {"website": websiteId, "library": param}) }}"
                           class="nav-link{% if libraryName == libraries[library] %} active{% endif %}"
                           data-toggle="preloader">
                            <span class="d-none d-sm-inline-block">{{ libraries[param] }}</span>
                        </a>
                    </li>
                {% endif %}
            {% endfor %}
        </ul>

        <div class="row m-md-0 bg-white">
            <div class="col-md-10 my-auto p-md-0">
                <form role="search" class="icons-search p-4">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><i class="fal fa-search"></i></span>
                        </div>
                        <input placeholder="{{ "Rechercher"|trans }}" class="form-control" type="text">
                    </div>
                </form>
            </div>
            <div id="add-icon-btn" class="col-md-2 p-md-0 text-center bg-info">
                {{ render_esi(controller("App\\Controller\\Admin\\Development\\IconController::new", {"website": websiteId})) }}
            </div>
        </div>

        {% set countryNames = app.request.locale|countryNames %}

        <!-- Tab panes -->
        <div id="icons-contents" class="tab-content bg-white mb-4" data-librairy="{{ library }}">
            <div id="tab-pane-{{ library }}" class="tab-pane active">
                <div class="card-body pb-0">
                    <div class="row glyphs">
                        {% for icon in icons %}
                            <div class="item col-md-3 col-sm-4 mb-3">
                                <div class="d-flex align-items-center">
                                    <i class="{{ icon.className }} mr-3 icon-2x"></i>
                                    <div>
                                        <div class="search-icon">{% if icon.locale and countryNames[icon.locale|upper] is defined %}{{ countryNames[icon.locale|upper] }}{% else %}{{ icon.className }}{% endif %}</div>
                                    </div>
                                    <div class="icon-copy waves-effect waves-dark" data-toggle="tooltip" title="{{ "Copier"|trans }}">
                                        <div class="inner h-100"><i class="fal fa-copy"></i></div>
                                    </div>
                                </div>
                            </div>
                        {% else %}
                            <div class="col-12">
                                {% include 'admin/include/alert.html.twig' with {"alert": "info", "message": "Aucune icône enregistrée."|trans} only %}
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>

    </div>

{% endblock %}