{% extends "layouts/base.html" %}
{% load static %}

{% block title %} Main Page {% endblock title %}

<!-- Specific CSS goes HERE  -->
{% block stylesheets %}
<link rel="stylesheet" href="{% static 'css/home/main.css' %}">
<link rel="stylesheet" href="{% static '/css/select2-bootstrap.min.css' %}">
{% endblock stylesheets %}

{% block content %}

  <!-- ### $App Screen Content ### -->
<main class="main-content bg-body-tertiary" style="padding-top: 65px">
    <div id="mainContent">
        <div class="container-fluid pX-0">
            <div class="lh-1 pX-5 my-4 peers">
                <div class="peer peer-greed">
                    <h3 class="mB-0">Subscriptions</h3>
                </div>
                <div class="peer fs-5 fw-bold">
                    <button class="btn bg-body mR-3 rounded-3 waves-effect bd" onclick="subEditModal(-1);">
                        <i class="bi bi-plus"></i>
                        New Subscription
                    </button>
                </div>
            </div>

            <div id="subscriptionContainer" class="row gap-20">

                <!-- Subscriptions Here! -->

            </div>
        </div>
    </div>
</main>

<div id="subEditModal" class="modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content rounded-3 bd">
            <div class="modal-header px-4 py-3">
                <h5 class="modal-title"></h5>
            </div>
            <nav>
                <div class="nav nav-pills nav-fill modal-tabs px-4 pt-3" role="tablist">
                    <button id="navDetailsTab" class="nav-link" data-bs-toggle="tab" data-bs-target="#navDetailsPanel" type="button" role="tab" aria-controls="navDetailsPanel" aria-selected="true">Details</button>
                    <button id="navChannelTab" class="nav-link" data-bs-toggle="tab" data-bs-target="#navChannelPanel" type="button" role="tab" aria-controls="navChannelPanel" aria-selected="true">Channels</button>
                    <button id="navExtrasTab" class="nav-link" data-bs-toggle="tab" data-bs-target="#navExtrasPanel" type="button" role="tab" aria-controls="navExtrasPanel" aria-selected="true">Extras</button>
                </div>
            </nav>
            <div class="modal-body px-4 py-3">
                <form id="subEditForm" class="needs-validation" novalidate>
                    <div class="tab-content">
                        <div id="navDetailsPanel" class="tab-pane fade" role="tabpanel" aria-labelledby="navDetailsTab" tabindex="0">
                            <div class="mb-3">
                                <label for="editSubName" class="form-label">Name</label>
                                <input type="text" name="editSubName" id="editSubName" class="form-control border-3 bd" required maxlength="32">
                                <div class="invalid-feedback">Required, Maximum of 32 Characters.</div>
                            </div>
                            <div class="mb-3">
                                <label for="editSubURL" class="form-label">URL</label>
                                <input type="url" name="editSubURL" id="editSubURL" class="form-control border-3 bd" required>
                                <div class="invalid-feedback">Please Enter a Valid URL.</div>
                            </div>
                            <div>
                                <label for="editSubImage" class="form-label">Image</label>
                                <input type="file" name="editSubImage" id="editSubImage" class="form-control border-3 bd">
                                <div class="form-text">Optional</div>
                                <div class="invalid-feedback">This Image Is Invalid.</div>
                            </div>
                        </div>
                        <div id="navChannelPanel" class="tab-pane fade" role="tabpanel" aria-labelledby="navChannelTab" tabindex="0">
                            <div class="mb-3">
                                <label for="editSubServer" class="form-label">Server</label>
                                <select name="editSubServer" id="editSubServer" class="border-3 bd select-2" data-dropdownparent="#subEditModal" required>
                                    <option value="">Select a server</option>
                                </select>
                                <div class="form-help">Ensure that PYRSS Bot is a member of the selected server.</div>
                                <div class="invalid-feedback">Please Select a Server.</div>
                            </div>
                            <div>
                                <label for="editSubChannels">Channels</label>
                                <select name="editSubChannels" id="editSubChannels" class="border-3 bd select-2" data-dropdownparent="#subEditModal" required multiple>
                                </select>
                                <div class="invalid-feedback">Please Select one or more Channels.</div>
                            </div>
                        </div>
                        <div id="navExtrasPanel" class="tab-pane fade" role="tabpanel" aria-labelledby="navExtrasTab" tabindex="0">
                            <div>
                                <label for="editSubNotes" class="form-label">Notes</label>
                                <textarea name="editSubNotes" id="editSubNotes" class="form-control" style="height: 200px;"></textarea>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer px-4 py-3">
                <button class="btn bg-body-tertiary rounded-3 waves-effect bd" onclick="submitSubEditModal();">
                    <i class="bi bi-check me-1`"></i>
                    Submit
                </button>
                <button class="btn bg-body-tertiary rounded-3 waves-effect bd ms-3" data-bs-dismiss="modal">
                    <i class="bi bi-x me-1`"></i>
                    Cancel
                </button>
            </div>
        </div>
    </div>
</div>

<div id="subDeleteModal" class="modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content rounded-3 bd">
            <div class="modal-header px-4 py-3">
                <h5 class="modal-title">Delete Subscription</h5>
            </div>
            <div class="modal-body px-4 py-3">
                <p class="mb-3">
                    The following subscriptions will be permanently deleted, do you want to continue?
                </p>
                <p class="mb-0">To be erased:</p>
                <ul class="mb-0 text-danger">
                    <li>
                        <span class="del-sub-name"></span> &#40;<span class="del-sub-uuid"></span>&#41;
                    </li>
                </ul>
            </div>
            <div class="modal-footer px-4 py-3">
                <button class="del-sub-confirm btn bg-body-tertiary rounded-3 waves-effect bd" onclick="alert('no sub selected');">
                    <i class="bi bi-check me-1`"></i>
                    Yes, Delete!
                </button>
                <button class="btn bg-body-tertiary rounded-3 waves-effect bd ms-3" data-bs-dismiss="modal">
                    <i class="bi bi-x me-1`"></i>
                    Cancel
                </button>
            </div>
        </div>
    </div>
</div>

{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}
<script id="subCategoryTemplate" type="text/template">
    <div class="col-12">
        <hr class="my-0">
        <div class="peers my-4 bg-body p-3 w-fc rounded-3 bd ai-c" style="margin: 0 0.75rem;">
            <div class="peer">
                <img class="cat-icon rounded-3" width="50" height="50">
            </div>
            <div class="peer ps-3">
                <div class="layers align-items-start">
                    <h6 class="layer cat-name mb-1"></h6>
                    <p class="layer cat-id mb-0"></p>
                </div>
            </div>
        </div>
        <div class="container-fluid">
            <div class="row sub-container">

            </div>
        </div>
    </div>
</script>

<script id="subItemTemplate" type="text/template">
    <div class="col-md-6 col-lg-4 col-xxl-3 mb-4">
        <div class="sub-item layers bd bg-body h-100 rounded-3" data-uuid="">
            <div class="layer w-100">
                <div class="peers px-4 py-3 flex-nowrap">
                    <div class="peer peer-greed me-4 text-wrap overflow-hidden">
                        <h5 class="sub-name"></h5>
                        <div class="sub-uuid mb-2"></div>
                        <div class="d-flex sub-datetime"></div>
                    </div>
                    <div class="peer">
                        <img src="" alt="" class="sub-img rounded-3" width="100" height="100" style="object-fit: cover; ">
                    </div>
                </div>
            </div>
            <div class="layer w-100 px-4 py-3 bdT">
                <p class="sub-desc mb-2"></p>
                <a class="sub-rss"></a>
            </div>
            <div class="layer w-100 bdT px-4 py-3 mt-auto">
                <div class="peers ai-c">
                    <div class="peer peer-greed">
                        <div class="form-check form-switch ms-2 mb-0">
                            <input type="checkbox" class="sub-active form-check-input shadow-none" style="transform: scale(1.5);">
                        </div>
                    </div>
                    <div class="peer">
                        <button type="button" class="btn bg-body-tertiary waves-effect bd rounded-3 border-0" onclick="showToast('warning', 'Warning', 'Activity History not implemented yet');">
                            <i class="bi bi-clock-history"></i>
                        </button>
                    </div>
                    <div class="peer ms-3">
                        <div class="vr mx-0"></div>
                    </div>
                    <div class="peer ms-3">
                        <button type="button" class="sub-edit btn bg-body-tertiary waves-effect bd rounded-3 border-0">
                            <i class="bi bi-pencil"></i>
                        </button>
                    </div>
                    <div class="peer ms-3">
                        <button type="button" class="sub-copy btn bg-body-tertiary waves-effect bd rounded-3 border-0">
                            <i class="bi bi-copy"></i>
                        </button>
                    </div>
                    <div class="peer ms-3">
                        <button type="button" class="sub-delete btn bg-body-tertiary waves-effect bd rounded-3 border-0">
                            <i class="bi bi-trash3"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>
<script src="{% static 'js/api.js' %}"></script>
<script src="{% static 'js/subscriptions.js' %}"></script>
{% endblock javascripts %}
