{% extends 'layouts/base.html' %}

{% load static %}

{% block title %}{% endblock title %}

{% block stylesheets %}
<link rel="stylesheet" href="{% static '/css/home/index.css' %}">
{% endblock stylesheets %}

{% block content %}
<div class="container h-100">
    <div class="d-flex flex-nowrap h-100">
        <div class="d-flex flex-column flex-shrink-0 bg-body-tertiary py-3" style="width: 4.5rem">
            <ul id="serverList" class="nav nav-pills nav-flush flex-column mb-auto text-center">
                <li class="nav-item"><hr class="my-2"></li>
                <li class="nav-item">
                    <a href="#" id="newServerBtn" class="nav-link px-3 py-2 rounded-0">
                        <div class="text-light bg-primary rounded-circle mx-auto ratio ratio-1x1 position-relative" style="max-width: 100">
                            <i class="bi bi-plus-lg fs-5 position-absolute top-50 start-50 translate-middle" style="width: fit-content; height: fit-content;"></i>
                        </div>    
                    </a>
                </li>
            </ul>
        </div>
        <div class="flex-grow-1 container-fluid bg-body" style="min-width: 0;">
            <div id="noSelectedServer">
                select a server
            </div>
            <div id="selectedServerContainer" class="row" style="display: none;">
                <div class="col-12 bg-body-tertiary">
                    <div class="px-3 py-4 d-flex justify-content-start align-items-center">
                        <img src="..." alt="Selected Server Icon" class="rounded-3 selected-server-icon">
                        <div class="ms-3">
                            <h3 class="mb-0 selected-server-name"></h3>
                            <h5 class="mb-0 selected-server-id"></h5>
                        </div>
                    </div>
                </div>

                <div class="col-12 bg-body-tertiary">
                    <div class="px-3 py-4">
                        <button type="button" id="tableButton" class="btn btn-primary">See Selected</button>
                        <button type="button" id="tableAddRowBtn" class="btn btn-success">Add New</button>
                        <button type="button" id="tableDeleteSelectedBtn" class="btn btn-danger" disabled>Delete Selected</button>
                    </div>
                </div>

                <div class="col-12">
                    <div class="table-responsive mt-3">
                        <table id="subTable" class="table table-hover align-middle"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% include "home/includes/servermodal.html" %}
{% include "home/includes/submodal.html" %}
{% endblock content %}

{% block javascript %}
<script id="serverItemTemplate" type="text/template">
    <li class="nav-item server-item" data-id="">
        <a href="#" class="nav-link px-3 py-2 rounded-0" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Option 1" aria-label="Option 1">
            <img src="" alt="Guild Icon" class="rounded-circle" style="max-width: 100%;">
        </a>
    </li>
</script>
<script src="{% static 'js/api.js' %}"></script>
<script src="{% static 'js/home/index.js' %}"></script>
<script src="{% static 'js/home/servers.js' %}"></script>
<script src="{% static 'js/home/subscriptions.js' %}"></script>
{% endblock javascript %}
