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

{% load static %}

{% block title %} Blank 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">
    <div id="mainContent">
        <div class="full-container d-flex">

            <div class="peers flex-nowrap as-s ai-s w-100">
                <div class="peer bg-body-secondary">
                    <div id="serverList" class="p-2 layers border-end h-100">
                        <div class="layer mb-2">
                            <button type="button" id="newServerBtn" class="btn bg-body rounded-circle bd" style="width: 50px; height: 50px;">
                                <span class="d-flex jc-c ai-c">
                                    <i class="bi bi-plus-lg fs-5"></i>
                                </span>
                            </button>
                        </div>
                    </div>
                </div>
                <div id="noSelectedServer" class="peer-greed">
                    Select a server or add one
                </div> 
                <div id="selectedServerContainer" class="peer-greed" data-guild-id="" style="display: none;">
                    <header class="px-4 py-3 border-bottom">
                        <div class="peers">
                            <div class="peer-greed">
                                <div class="peers ai-c">
                                    <div class="peer">
                                        <img class="selected-server-icon rounded-3" src="" alt="server icon" width="80">
                                    </div>
                                    <div class="peer-greed ms-4">
                                        <h3 class="selected-server-name mb-1">none</h3>
                                        <h6 class="selected-server-id mb-0">none</h6>
                                    </div>
                                </div>
                            </div>
                            <div class="peer d-flex as-s ai-c">
                                <button type="button" id="newSubscriptionBtn" class="btn btn-primary">New Subscription</button>
                                <button type="button" id="deleteSelectedServerBtn" class="btn btn-danger ms-2">
                                    <i class="bi bi-trash3"></i>
                                </button>
                            </div>
                        </div>
                    </header>

                    <div id="serverAlertContainer" class="px-4 pt-3">
                        <div class="alert alert-warning d-flex ai-c">
                            <span>
                                <b>PYRSS</b> can't seem to access this server!
                                Please ensure the server is public, or <b>PYRSS</b> is a member.
                            </span>
                            <button class="ms-auto btn btn-sm btn-warning">
                                Invite PYRSS
                                <i class="ms-2 bi bi-person-plus"></i>
                            </button>
                        </div>
                        <div class="alert alert-danger">
                            Critical Error
                        </div>
                    </div>

                    <div class="mx-4 rounded-3 border ov-h">
                        <div class="table-responsive">

                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th scope="col" class="text-center">
                                            <input type="checkbox" class="form-check-input" />
                                        </th>
                                        <th scope="col">Name</th>
                                        <th scope="col">RSS URL</th>
                                        <th scope="col">Channels</th>
                                        <th scope="col">Created</th>
                                        <th scope="col">Notes</th>
                                        <th scope="col">Active</th>
                                        <th scope="col" class="text-center">
                                            <a href="#" class="text-body">
                                                <i class="bi bi-plus-lg"></i>
                                            </a>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <th scope="row" class="text-center">
                                            <input type="checkbox" class="form-check-input" />
                                        </th>
                                        <td>
                                            <a href="#">BBC News - Top Stories</a>
                                        </td>
                                        <td>
                                            <a href="http://feeds.bbci.co.uk/news.rss">http://feeds.bbci.co.uk/news.rss</a>
                                        </td>
                                        <td>
                                            <a href="#">3</a>
                                        </td>
                                        <td>2024-03-14</td>
                                        <td>
                                            <a href="#" class="text-body">
                                                <i class="bi bi-chat-left-text"></i>
                                            </a>
                                        </td>
                                        <td>
                                            <input type="checkbox" class="form-check-input" />
                                        </td>
                                        <td class="text-center">
                                            <a href="#" class="text-body">
                                                <i class="bi bi-pencil"></i>
                                            </a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th scope="row" class="text-center">
                                            <input type="checkbox" class="form-check-input" />
                                        </th>
                                        <td>
                                            <a href="#">BBC News - Entertainment & Arts</a>
                                        </td>
                                        <td>
                                            <a href="http://feeds.bbci.co.uk/news.rss">http://feeds.bbci.co.uk/news/entertainment_and_arts/.rss</a>
                                        </td>
                                        <td>
                                            <a href="#">2</a>
                                        </td>
                                        <td>2024-03-15</td>
                                        <td>
                                            <a href="#" class="text-body">
                                                <i class="bi bi-chat-left-text"></i>
                                            </a>
                                        </td>
                                        <td>
                                            <input type="checkbox" class="form-check-input" />
                                        </td>
                                        <td class="text-center">
                                            <a href="#" class="text-body">
                                                <i class="bi bi-pencil"></i>
                                            </a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    {% comment %} <div id="subscriptionContainer" class="container-fluid px-4">
                        <div class="row">
                            <div class="col-3 mb-4">
                                <div class="bg-body px-4 py-3 bd rounded-3">
                                    add
                                </div>
                            </div>
                        </div>
                    </div> {% endcomment %}
                </div>
            </div>

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

{% include "home/includes/servermodal.html" %}

{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}

<script id="serverItemTemplate" type="text/template">
    <div class="server-item layer mb-2" data-id="" data-guild-id="" data-name="" data-icon="">
        <button type="button" class="bg-none border-0">
            <img src="" class="rounded-circle" alt="" width="50" height="50">
        </button>
    </div>
</script>

<script src="{% static 'js/api.js' %}"></script>
<script src="{% static 'js/home.js' %}"></script>

{% endblock javascripts %}
