{% extends request.ajax ? 'layout_blank.html.twig' : 'layout_default.html.twig' %}

{% block meta_title %}{{ 'Widgets'|trans }}{% endblock %}

{% set active_menu = 'extensions' %}

{% block breadcrumbs %}
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{ '/'|url }}">
                <svg class="icon">
                    <use xlink:href="#home" />
                </svg>
            </a>
        </li>
        <li class="breadcrumb-item">
            <a href="{{ 'extension'|url }}">{{ 'Extensions'|trans }}</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">{{ 'Widgets'|trans }}</li>
    </ol>
{% endblock %}

{% set slots = admin.widgets_list() %}

{% block content %}
    <div class="card">
        <div class="card-header">
            <div>
                <h3 class="card-title">{{ 'Widget Registry'|trans }}</h3>
                <p class="card-subtitle">{{ 'Review registered widget slots and the modules that populate them across the admin and client themes.'|trans }}</p>
            </div>
            <div class="card-actions">
                <a href="{{ 'widgets/rebuild'|api_url }}" class="btn btn-outline-secondary"
                   {{ fb_api_link({ reload: true, message: 'Widget cache rebuilt successfully'|trans}) }}>
                    <svg class="icon">
                        <use xlink:href="#refresh" />
                    </svg>
                    {{ 'Rediscover Widgets'|trans }}
                </a>
            </div>
        </div>

        {% if slots is empty %}
            <div class="card-body">
                <div class="empty">
                    <div class="empty-icon">
                        <svg class="icon icon-lg">
                            <use xlink:href="#info" />
                        </svg>
                    </div>
                    <p class="empty-title">{{ 'No widgets registered'|trans }}</p>
                    <p class="empty-subtitle text-secondary">
                        {{ 'Widgets will appear here when modules that provide them are activated.'|trans }}<br>
                        {{ 'Modules register widgets by implementing a <code>getWidgets()</code> method in their Service class.'|trans|raw }}
                    </p>
                    <div class="empty-action">
                        <a href="{{ 'extension'|url }}" class="btn btn-primary">
                            <svg class="icon">
                                <use xlink:href="#iPlugin" />
                            </svg>
                            {{ 'Manage Extensions'|trans }}
                        </a>
                    </div>
                </div>
            </div>
        {% else %}
            <div class="card-body border-bottom py-3">
                <div class="d-flex">
                    <div class="text-secondary">
                        {{ 'Showing'|trans }}
                        <span class="text-body fw-semibold">{{ slots|length }}</span>
                        {{ slots|length == 1 ? 'slot'|trans : 'slots'|trans }}
                        {{ 'with'|trans }}
                        <span class="text-body fw-semibold">{% set total_widgets = 0 %}{% for slot in slots %}{% set total_widgets = total_widgets + slot.count %}{% endfor %}{{ total_widgets }}</span>
                        {{ total_widgets == 1 ? 'widget'|trans : 'widgets'|trans }}
                    </div>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table table-vcenter card-table table-striped">
                    <thead>
                        <tr>
                            <th>{{ 'Slot'|trans }}</th>
                            <th>{{ 'Widgets'|trans }}</th>
                            <th class="w-1 text-end">{{ 'Count'|trans }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for slot in slots %}
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <span class="avatar avatar-sm bg-primary-lt text-secondary me-2">
                                            <svg class="icon">
                                                <use xlink:href="#cog" />
                                            </svg>
                                        </span>
                                        <div>
                                            <code class="text-reset">{{ slot.slot }}</code>
                                            <div class="text-secondary small">
                                                {% set slot_parts = slot.slot|split('.') %}
                                                {% if slot_parts[0] == 'admin' %}
                                                    <span class="badge bg-blue-lt">{{ 'Admin'|trans }}</span>
                                                {% elseif slot_parts[0] == 'client' %}
                                                    <span class="badge bg-green-lt">{{ 'Client'|trans }}</span>
                                                {% endif %}
                                                {% if slot_parts[1] == 'theme' %}
                                                    {{ 'Theme layout slot'|trans }}
                                                {% else %}
                                                    {{ 'Module slot'|trans }}
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="d-flex flex-column gap-1">
                                        {% for widget in slot.widgets %}
                                            <div class="d-flex align-items-center gap-2">
                                                <span class="badge bg-secondary text-white" data-bs-toggle="tooltip" data-bs-title="{{ 'Priority'|trans }}">{{ widget.priority }}</span>
                                                <span class="fw-medium">{{ widget.module|capitalize }}</span>
                                                <span class="text-secondary">&rarr;</span>
                                                <code class="text-secondary small">widgets/{{ widget.template }}.html.twig</code>
                                            </div>
                                        {% endfor %}
                                    </div>
                                </td>
                                <td class="text-end">
                                    <span class="badge bg-blue-lt">{{ slot.count }}</span>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            <div class="card-footer">
                <div class="row align-items-center">
                    <div class="col-auto">
                        <svg class="icon">
                            <use xlink:href="#info" />
                        </svg>
                    </div>
                    <div class="col">
                        <div class="text-secondary">
                            {{ 'Widgets are registered automatically when modules are activated. Lower priority numbers are rendered first.'|trans }}
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}
    </div>
{% endblock %}
