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

{% block content %}
{# Input Section #}
<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">Application Tokens</h1>
        <div class="btn-toolbar mb-2 mb-md-0">
            <a class="btn btn-outline-primary" @click="CreateMedia()">
                <i class="me-2 ti ti-playlist-add"></i>Add Application
            </a>
        </div>
    </div>
    {# Media List #}
    <table class="table align-middle">
        <thead>
            <tr>
                <th scope="col">Name</th>
                <th scope="col">Token</th>
                <th scope="col">Expires</th>
                <th scope="col">Actions</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="mediaData, mediaIndex in mediaList">
                <td>{% raw %}{{ mediaData.name }}{% endraw %}</td>
                <td>
                    <span class="badge text-bg-info user-select-all">sadlokfgjaskoldfjnosdaf</span>
                </td>
                <td>2023-11-01 12:00:00</td>
                <td>
                    <a class="btn btn-outline-primary" @click="EditMedia(mediaData.uid)">
                        <i class="ti ti-printer me-2"></i>Edit
                    </a>
                    <a class="btn btn-outline-danger" @click="DeleteMedia(mediaData.uid)">
                        <i class="ti ti-trash me-2"></i>Delete
                    </a>
                </td>
            </tr>
        </tbody>
    </table>

    <!-- <div class="col-12">
        <div class="row row-cols-1 row-cols-md-2 g-4">
            <div class="col" v-for="mediaData, mediaIndex in mediaList">
                <div class="col card border-primary shadow">
                    <div class="card-header py-3">
                        <p class="text-primary m-0 fw-bold">{% raw %}{{ mediaData.name }}{% endraw %}</p>
                    </div>
                    <div class="card-body px-0">
                        <div class="container">
                            <span>
                                sadlokfgjaskoldfjnosdaf
                            </span>
                        </div>
                    </div>
                    <div class="card-footer text-body-secondary">
                        <div class="d-flex justify-content-end" style="gap: 0.6rem">
                            <a class="btn btn-outline-primary" @click="EditMedia(mediaData.uid)">
                                <i class="ti ti-printer me-2"></i>Edit
                            </a>
                            <a class="btn btn-outline-danger" @click="DeleteMedia(mediaData.uid)">
                                <i class="ti ti-trash me-2"></i>Delete
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> -->
</div>
</div>

{# add Media Modal #}
<div class="modal fade" id="addMediaModal" data-bs-backdrop="static" aria-hidden="true" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="labelModalLabel" v-if="mediaEditor.uid == null">Create Media</h1>
                <h1 class="modal-title fs-5" id="labelModalLabel" v-if="mediaEditor.uid != null">Media {% raw %}{{ mediaEditor.uid }}{% endraw %}</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body mx-2 d-flex flex-column" style="gap: 1rem">
                <div class="col-12">
                    <label class="form-label">Media Name</label>
                    <input type="text" class="form-control label-input" placeholder="Media Name" v-model="mediaEditor.name">
                </div>
                <div class="row">
                    <div class="col-6">
                        <label class="form-label">Number of Columns</label>
                        <div class="col-6 input-group">
                            <input type="text" class="form-control" placeholder="3" v-model="mediaEditor.numColumns">
                        </div>
                    </div>
                    <div class="col-6">
                        <label class="form-label">Column Spacing</label>
                        <div class="col-6 input-group">
                            <input type="text" class="form-control" placeholder="2" v-model="mediaEditor.columnSpacing">
                            <span class="input-group-text">mm</span>
                        </div>
                    </div>
                </div>
                {# <div class="row">
                    <div class="col-6">
                        <label class="form-label">Label Width</label>
                        <div class="col-6 input-group">
                            <input type="text" class="form-control" placeholder="0" v-model="mediaEditor.labelWidth">
                            <span class="input-group-text">mm</span>
                        </div>
                    </div>
                    <div class="col-6">
                        <label class="form-label">Label Height</label>
                        <div class="col-6 input-group">
                            <input type="text" class="form-control" placeholder="22" v-model="mediaEditor.labelHeight">
                            <span class="input-group-text">mm</span>
                        </div>
                    </div>
                </div> #}
                <div class="col-12 d-flex" style="gap: 1rem">
                    <a class="btn btn-outline-primary" @click="SaveMedia()">
                        <i class="me-2 ti ti-device-floppy"></i>Save
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

{# delete Media Confirmation Modal #}
<div class="modal fade" id="deleteMediaModal" data-bs-backdrop="static" aria-hidden="true" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body mx-2 d-flex flex-column" style="gap: 1rem">
                <h5 class="mb-0">Delete Media</h5>
                <p class="mb-0">Are you sure you want to delete Media {% raw %}{{ mediaEditor.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="DeleteMedia(mediaEditor.uid, 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="/app.queue.list.js"></script>
{% endblock %}