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

{% block content %}
    <h2>UI Elements</h2>
    <div class="card-deck">
        <div class="card bg-light mb-3">
            <div class="card-body">
                <h5 class="card-title">Options</h5>
                <div class="list-group">
                    <a href="{% url 'ndr_core:create_ui_element' 'card' %}" class="list-group-item list-group-item-action py-2">
                        <i class="fa-regular fa-plus-circle"></i>
                        Create New Card<br/>
                        <small>A single image with a title and text.</small>
                    </a>
                    <a href="{% url 'ndr_core:create_ui_element' 'carousel' %}" class="list-group-item list-group-item-action py-2">
                        <i class="fa-regular fa-plus-circle"></i>
                        Create new Carousel<br/>
                        <small>Multiple Cards in a carousel.</small>
                    </a>
                    <a href="{% url 'ndr_core:create_ui_element' 'slideshow' %}" class="list-group-item list-group-item-action py-2">
                        <i class="fa-regular fa-plus-circle"></i>
                        Create New Slideshow<br/>
                        <small>Images with title/caption overlay.</small>
                    </a>
                    <a href="{% url 'ndr_core:create_ui_element' 'jumbotron' %}" class="list-group-item list-group-item-action py-2">
                        <i class="fa-regular fa-plus-circle"></i>
                        Create New Jumbotron<br/>
                        <small>Title with a background image.</small>
                    </a>
                    <a href="{% url 'ndr_core:create_ui_element' 'iframe' %}" class="list-group-item list-group-item-action py-2">
                        <i class="fa-regular fa-plus-circle"></i>
                        Create New Iframe<br/>
                        <small>Content from another location.</small>
                    </a>
                    <a href="{% url 'ndr_core:create_ui_element' 'banner' %}" class="list-group-item list-group-item-action py-2">
                        <i class="fa-regular fa-plus-circle"></i>
                        Create New Banner<br/>
                        <small>Banner.</small>
                    </a>
                    <a href="{% url 'ndr_core:help_chapter' 'ui_elements' %}" class="list-group-item list-group-item-action py-2">
                        <i class="fa-regular fa-circle-info"></i>
                        Help
                    </a>
                </div>
            </div>
        </div>

        <div class="card bg-light mb-3">
            <div class="card-body">
                <h5 class="card-title">Configured Elements</h5>
                <ul class="list-group">
                    {% for element in ui_elements %}
                        <li class="list-group-item list-group-item-action d-flex py-2">
                            <p class="p-0 m-0 flex-grow-1">
                                <i class="fa-regular fa-window-restore"></i> <a href="{% url 'ndr_core:view_ui_element' element.pk %}">{{ element.title }}</a>
                                <span class="badge badge-secondary">{{ element.type }}</span>
                            </p>

                            <p class="p-0 m-0">
                                <a href="{% url 'ndr_core:edit_ui_element' element.pk %}" class="btn btn-sm btn-secondary">
                                    <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">
                                    <i class="fa-regular fa-delete-left"></i>
                                </a>
                            </p>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>

    {% if object %}
        <div class="card bg-light mb-3">
            <div class="card-body">
                <h5 class="card-title">Preview: {{ object.title }}</h5>
                <p>To include this element, copy this into your page text: <code><em>[[{{ object.type }}|{{ object.id }}]]</em></code></p>
                {% 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 == "banner" %}
                    {% include 'ndr_core/ui_elements/banner.html' with data=object %}
                {% endif %}

            </div>
            <div class="card-footer text-center">

            </div>
        </div>

    {% endif %}

    <div class="alert alert-info small" role="alert">
        <i class="fa-regular fa-circle-info"></i>
    </div>

{% endblock %}