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

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

{% set active_menu = 'system' %}
{% set settings_extensions = admin.extension_get_list({ 'active': true, 'has_settings': 1 }|merge(request)) %}

{% block content %}
    <div class="card">
        <div class="card-header">
            <div>
                <h3 class="card-title">{{ 'Settings'|trans }}</h3>
                <p class="card-subtitle">{{ 'Open module-level configuration screens for billing, support, localization, themes, and other system features.'|trans }}</p>
            </div>
        </div>
        <div class="card-body">
            <div class="row row-cards">
                {% for ext in settings_extensions %}
                    <div class="col-md-6 col-xl-4">
                        <a class="card card-sm card-link h-100 text-reset" href='{{ "extension/settings/#{ext.id}"|url }}'>
                            <div class="card-body">
                                <div class="d-flex align-items-start gap-3">
                                    {% set icon_filename = ext.icon_url|split('/')|last %}
                                    {% if (icon_filename != 'cog.svg') and (icon_filename|split('.')|last == 'svg' and ext.icon_path) %}
                                        <div class="text-primary flex-shrink-0" style="width: 24px; height: 24px;">
                                            {{ source(ext.icon_path, ignore_missing = true) }}
                                        </div>
                                    {% else %}
                                        <img class="flex-shrink-0" src="{{ ext.icon_url }}" alt="{{ ext.name }}" style="width: 32px; height: 32px;">
                                    {% endif %}
                                    <div class="flex-fill min-w-0">
                                        <div class="d-flex align-items-start justify-content-between gap-2">
                                            <div>
                                                <div class="fw-semibold">{{ ext.name }}</div>
                                                <div class="text-secondary small">{{ ext.description ?: 'Manage module settings and operational defaults.'|trans }}</div>
                                            </div>
                                            <svg class="icon text-secondary flex-shrink-0">
                                                <use xlink:href="#chevron-right" />
                                            </svg>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                {% else %}
                    <div class="col-12">
                        <div class="text-muted text-center py-3">{{ 'No configurable modules were found.'|trans }}</div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
{% endblock %}
