{% extends "./master.njk" %}

{% block content %}
<div class="container">

<div class="row row-cols-2 g-4">
    <div class="col-12 d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-4 mb-3 border-bottom">
        <h1 class="h2 m-0">
            <i class="ti ti-template me-5"></i>Template Settings
        </h1>
        <div class="btn-toolbar mb-2 mb-md-0">
            <a class="btn btn-outline-primary" @click="CreateTemplate()">
                <i class="me-2 ti ti-playlist-add"></i>Add Template
            </a>
        </div>
    </div>
    {# Template List #}
    <div class="col-12">
        <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4">
            <div class="col" v-for="(template, index) in templateList">
                <div class="col card border-primary shadow">
                    <div class="card-header py-3">
                        <p class="text-primary m-0 fw-bold">{% raw %}{{ template.name }}{% endraw %}</p>
                    </div>
                    <div class="card-body px-0">
                        <table class="table my-0">
                            <tfoot>
                                <tr>
                                    <td class="ps-4 py-2">Number of Elements:</td>
                                    <td class="ps-0 py-2">{% raw %}{{ template.elements.length }}{% endraw %}</td>
                                </tr>
                                <tr>
                                    <td class="ps-4 py-2">Number of Variables:</td>
                                    <td class="ps-0 py-2">{% raw %}{{ template.variables.length }}{% endraw %}</td>
                                </tr>
                            </tfoot>
                        </table>
                        <div class="d-flex pt-3 px-4" style="gap: 0.6rem">
                            <a class="btn btn-outline-primary" @click="EditTemplate(index)">
                                <i class="ti ti-printer me-2"></i>Edit
                            </a>
                            <a class="btn btn-outline-danger" @click="DeleteTemplate(index)">
                                <i class="ti ti-trash me-2"></i>Delete
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

{# Template delete Confirmation Modal #}
<div class="modal fade" id="DeleteTemplateModal" data-bs-backdrop="static" aria-hidden="true" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" v-if="templateIndex != null">
            <div class="modal-body mx-2 d-flex flex-column" style="gap: 1rem">
                <h5 class="mb-0">Delete Template</h5>
                <p class="mb-0">Are you sure you want to delete Template {% raw %}{{ templateList[templateIndex].name }}{% endraw %}?</p>
            </div>
            <div class="modal-footer flex-nowrap p-0">
                <a class="btn btn-lg btn-link fs-6 text-decoration-none col-6 m-0 rounded-0 border-end" @click="DeleteTemplate(templateIndex, true)">
                    <strong>Delete</strong>
                </a>
                <a class="btn btn-lg btn-link fs-6 text-decoration-none col-6 m-0 rounded-0" data-bs-dismiss="modal">
                    Cancel
                </a>
            </div>
        </div>
    </div>
</div>

<script src="/api.js"></script>
<script src="/app.templates.js"></script>
{% endblock %}