{% extends 'ndr_core/admin_views/base.html' %}
{% load django_tables2 %}
{% load static %}

{% block content %}
    <h2><i class="fa-regular fa-window-maximize"></i> Change UI Style</h2>

    <!-- Options Bar -->
    <div class="d-flex flex-wrap align-items-center bg-light border rounded p-2 mb-3">
        <div class="me-auto">
            <span class="text-muted">Select a UI style below to change your site's layout</span>
        </div>
        <div>
            <a href="{% url 'ndr_core:help_chapter' 'ui_style' %}" class="btn btn-sm btn-outline-secondary m-1">
                <i class="fa-regular fa-circle-info"></i> Help
            </a>
        </div>
    </div>

    <!-- Current Selection -->
    <div class="card bg-light mb-3">
        <div class="card-body py-2">
            <div class="d-flex align-items-center justify-content-between">
                <div class="d-flex align-items-center">
                    <div class="me-3" style="max-width: 100px;">
                        {% with 'ndr_core/images/admin/'|add:ui_style.filename|add:'.png' as image_static %}
                            <img src="{% static image_static %}" class="img-fluid border" alt="{{ ui_style.label }}">
                        {% endwith %}
                    </div>
                    <div>
                        <h6 class="mb-1">Current UI Style: <strong>{{ ui_style.label }}</strong></h6>
                        <small class="text-muted">{{ ui_style.description }}</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card bg-light mb-3">
        <div class="card-body">
            <h5 class="card-title mb-3">Available UI Styles</h5>
            <div class="row">
                {% for style in ui_styles %}
                    <div class="col-lg-4 col-md-6 mb-3">
                        <div class="card h-100 {% if object.pk == style.pk or ui_style.pk == style.pk %}border-primary{% endif %}">
                            <a href="{% url 'ndr_core:view_ui_style' style.pk %}" style="text-decoration: none; color: inherit;">
                                {% with 'ndr_core/images/admin/'|add:style.filename|add:'.png' as image_static %}
                                    <img src="{% static image_static %}" class="card-img-top" alt="{{ style.label }}" style="border-bottom: 1px solid #dee2e6;">
                                {% endwith %}
                                <div class="card-body">
                                    <h6 class="card-title mb-1">
                                        {{ style.label }}
                                        {% if ui_style.pk == style.pk %}
                                            <span class="badge badge-success badge-sm ms-1">Current</span>
                                        {% endif %}
                                    </h6>
                                    <p class="card-text small text-muted mb-0">{{ style.description }}</p>
                                </div>
                            </a>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>

    {% if object %}
        <div class="card bg-light mb-3">
            <div class="card-body">
                <h5 class="card-title">{{ object.label }}</h5>
                <p>{{ object.description }}</p>
                <div class="container">
                    <div class="row">
                        <div class="col-3">Base HTML template</div>
                        <div class="col"><code>ndr_core/base/styles/base_{{ object.filename }}.html</code></div>
                    </div>
                </div>
            </div>
            <div class="card-footer text-center">
                {% if object.pk == ui_style.pk %}
                    <a href="{% url 'ndr_core:choose_ui_settings' object.pk %}" role="button" class="btn btn-secondary disabled">This Style is your Page Style</a>
                {% else %}
                    <a href="{% url 'ndr_core:choose_ui_settings' object.pk %}" role="button" class="btn btn-warning">Set this Style as your Page Style</a>
                {% endif %}
            </div>
        </div>
    {% endif %}

    <div class="alert alert-info small" role="alert">
        <i class="fa-regular fa-circle-info"></i>
        UI Styles define how your page is structured and where your base elements (such as the navigation) are.
    </div>

{% endblock %}