{% extends 'ndr_core/admin_views/base.html' %}

{% block content %}
    <h2><i class="fa-regular fa-window-restore"></i> UI Elements</h2>

    <!-- Options Bar -->
    <div class="d-flex flex-wrap align-items-center bg-light border rounded p-2 mb-3">
        <div class="me-auto">
            <a href="{% url 'ndr_core:configure_ui_elements' %}" class="btn btn-sm btn-primary m-1{% if not object %} active{% endif %}">
                <i class="fa-regular fa-list"></i> Manage UI Elements
            </a>
            <a href="{% url 'ndr_core:ui_element_showcase' %}" class="btn btn-sm btn-secondary m-1">
                <i class="fa-regular fa-grid"></i> Browse UI Element Types
            </a>
        </div>
        <div>
            <a href="{% url 'ndr_core:help_chapter' 'ui_elements' %}" class="btn btn-sm btn-outline-secondary m-1">
                <i class="fa-regular fa-circle-info"></i> Help
            </a>
        </div>
    </div>

    {% if not object %}
        <div class="mb-2">
            <input type="text" id="ui-element-filter" class="form-control form-control-sm"
                   placeholder="Filter by name or type…" oninput="filterUIElements(this.value)">
        </div>
        <div class="card bg-light mb-3">
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0" id="ui-elements-table">
                        <thead class="bg-light">
                            <tr>
                                <th style="width: 25%;">Element Name</th>
                                <th style="width: 15%;">Type</th>
                                <th style="width: 10%;">Items</th>
                                <th style="width: 30%;">Usage Code</th>
                                <th style="width: 20%;" class="text-right">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for element in ui_elements %}
                                <tr>
                                    <td>
                                        <i class="fa-regular fa-window-restore"></i>
                                        <a href="{% url 'ndr_core:view_ui_element' element.pk %}">
                                            <strong>{% if element.label %}{{ element.label }}{% else %}{{ element.name }}{% endif %}</strong>
                                        </a>
                                        <br><small class="text-muted">{{ element.get_type_display }}</small>
                                    </td>
                                    <td><span class="badge badge bg-secondary">{{ element.get_type_display }}</span></td>
                                    <td>
                                        {% with item_count=element.ndrcoreuielementitem_set.count %}
                                            {% if element.type in "slides,carousel,team_grid,card_grid" %}
                                                {# Multi-item types: show count #}
                                                {% if item_count > 0 %}
                                                    {{ item_count }} item{{ item_count|pluralize }}
                                                {% else %}
                                                    <span class="text-muted">Empty</span>
                                                {% endif %}
                                            {% else %}
                                                {# Single-item types: show configured/empty #}
                                                {% if item_count > 0 %}
                                                    <span class="badge badge bg-success">Configured</span>
                                                {% else %}
                                                    <span class="badge badge bg-secondary">Empty</span>
                                                {% endif %}
                                            {% endif %}
                                        {% endwith %}
                                    </td>
                                    <td>
                                        <div class="input-group input-group-sm">
                                            <input type="text"
                                                   value="[[element|{{ element.name }}]]"
                                                   class="form-control form-control-sm"
                                                   style="font-family: monospace; font-size: 0.85rem;"
                                                   readonly>
                                            <div class="input-group-append">
                                                <button class="btn btn-sm btn-outline-secondary"
                                                        type="button"
                                                        title="Copy to clipboard"
                                                        onclick="navigator.clipboard.writeText('[[element|{{ element.name }}]]'); this.innerHTML='<i class=\'fa fa-check\'></i>'; setTimeout(() => this.innerHTML='<i class=\'fa fa-copy\'></i>', 2000);">
                                                    <i class="fa fa-copy"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="text-right">
                                        <div style="white-space: nowrap;">
                                            <a href="{% url 'ndr_core:view_ui_element' element.pk %}" class="btn btn-sm btn-info" title="Preview">
                                                <i class="fa-regular fa-eye"></i>
                                            </a>
                                            <a href="{% url 'ndr_core:edit_ui_element_'|add:element.type element.pk %}" class="btn btn-sm btn-secondary" title="Edit">
                                                <i class="fa-regular fa-pen-to-square"></i>
                                            </a>
                                            <a href="{% url 'ndr_core:delete_ui_element' element.pk %}" class="btn btn-sm btn-danger" title="Delete">
                                                <i class="fa-regular fa-delete-left"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            {% empty %}
                                <tr>
                                    <td colspan="5" class="text-center text-muted py-4">
                                        <i class="fa-regular fa-window-restore fa-2x mb-2"></i>
                                        <p>No UI Elements configured yet. Create one to get started!</p>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    {% endif %}

    {% if object %}
        <div class="card bg-light mb-3">
            <div class="card-header d-flex align-items-center justify-content-between">
                <div>
                    <h5 class="mb-0">
                        <i class="fa-regular fa-eye"></i> Preview: <strong>{% if object.label %}{{ object.label }}{% else %}{{ object.name }}{% endif %}</strong>
                        <span class="badge badge bg-secondary ms-2">{{ object.get_type_display }}</span>
                    </h5>
                    {% if object.label %}
                        <small class="text-muted">Slug: {{ object.name }}</small>
                    {% endif %}
                </div>
                <div>
                    <a href="{% url 'ndr_core:edit_ui_element_'|add:object.type object.pk %}" class="btn btn-sm btn-secondary">
                        <i class="fa-regular fa-pen-to-square"></i> Edit
                    </a>
                    <form method="post" action="{% url 'ndr_core:copy_ui_element' object.pk %}" class="d-inline">
                        {% csrf_token %}
                        <button type="submit" class="btn btn-sm btn-outline-secondary">
                            <i class="fa-regular fa-copy"></i> Copy
                        </button>
                    </form>
                </div>
            </div>
            <div class="card-body">
                {% if object.type == "card" %}
                    {% include 'ndr_core/ui_elements/card.html' with data=object %}
                {% elif object.type == "slides" %}
                    {% include 'ndr_core/ui_elements/slideshow.html' with data=object %}
                {% elif object.type == "carousel" %}
                    {% include 'ndr_core/ui_elements/carousel.html' with data=object %}
                {% elif object.type == "banner" %}
                    {% include 'ndr_core/ui_elements/banner.html' with data=object %}
                {% elif object.type == "jumbotron" %}
                    {% include 'ndr_core/ui_elements/jumbotron.html' with data=object %}
                {% elif object.type == "iframe" %}
                    {% include 'ndr_core/ui_elements/iframe.html' with data=object %}
                {% elif object.type == "manifest_viewer" %}
                    {% include 'ndr_core/ui_elements/manifest_viewer.html' with data=object %}
                {% elif object.type == "data_object" %}
                    {% include 'ndr_core/ui_elements/data_object.html' with data=object %}
                {% elif object.type == "video" %}
                    {% include 'ndr_core/ui_elements/video.html' with data=object %}
                {% elif object.type == "audio" %}
                    {% include 'ndr_core/ui_elements/audio.html' with data=object %}
                {% elif object.type == "academic_about" %}
                    {% include 'ndr_core/ui_elements/academic_about.html' with data=object %}
                {% elif object.type == "card_grid" %}
                    {% with items=object.items %}
                        <p class="text-muted mb-1"><i class="fa-regular fa-grid-2"></i> Card Grid — {{ items|length }} card{{ items|length|pluralize }} configured.</p>
                        <ul class="list-unstyled small mb-0">
                            {% for item in items %}
                                <li><i class="fa-regular fa-square"></i> {{ item.object_id }}</li>
                            {% endfor %}
                        </ul>
                    {% endwith %}
                {% endif %}
            </div>
            <div class="card-footer">
                <div class="row align-items-center">
                    <div class="col-md-3 text-muted">
                        <strong>Usage Code:</strong>
                    </div>
                    <div class="col-md-9">
                        <div class="input-group">
                            <input type="text"
                                   value="[[element|{{ object.name }}]]"
                                   class="form-control"
                                   id="usage-code-{{ object.pk }}"
                                   readonly>
                            <div class="input-group-append">
                                <button class="btn btn-outline-secondary"
                                        type="button"
                                        onclick="navigator.clipboard.writeText('[[element|{{ object.name }}]]'); this.innerHTML='<i class=\'fa fa-check\'></i> Copied'; setTimeout(() => this.innerHTML='<i class=\'fa fa-copy\'></i> Copy', 2000);">
                                    <i class="fa fa-copy"></i> Copy
                                </button>
                            </div>
                        </div>
                        <small class="text-muted">Copy this code and paste it into your page text where you want the element to appear.</small>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}

    <div class="alert alert-info small" role="alert">
        <i class="fa-regular fa-circle-info"></i>
        <strong>UI Elements:</strong> Create reusable UI components like carousels, cards, and banners. Use the usage code to embed them in your pages.
    </div>

<script>
function filterUIElements(query) {
    const q = query.toLowerCase();
    document.querySelectorAll('#ui-elements-table tbody tr').forEach(row => {
        row.style.display = row.textContent.toLowerCase().includes(q) ? '' : 'none';
    });
}
</script>
{% endblock %}