PYRSS-Website/apps/home/templates/home/index.html

{% extends 'base.html' %}

{% load static %}
{% load compress %}

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

{% block stylesheets %}
{% compress css %}
    <link type="text/x-scss" rel="stylesheet" href="{% static '/home/scss/index.scss' %}">
{% endcompress %}
<link type="text/css" rel="stylesheet" href="{% static '/home/css/tables.css' %}">
<link type="text/css" rel="stylesheet" href="{% static '/css/select2.css' %}">
{% endblock stylesheets %}

{% block content %}
<div class="px-0 h-100">
    <div class="d-flex flex-nowrap h-100">

        {% include "home/sidebar.html" %}

        <div class="flex-grow-1 container-fluid bg-body overflow-y-auto" style="min-width: 0;">
            <div id="noSelectedServer" class="h-100">
                <div class="d-flex justify-content-center align-items-center flex-column h-100">
                    <img src="{% static '/images/pyrss_logo.webp' %}" alt="PYRSS Logo">
                    <h1 class="fw-bold mb-4 font-atkinson-hyperlegible">PYRSS</h1>
                    <div class="d-flex align-items-center flex-nowrap flex-column">
                        <p class="col-lg-8 text-center">Select a server from the left hand menu to get started. For more help check the <a href="https://gitea.cor.bz/corbz/PYRSS-Website/src/branch/master/README.md" class="text-decoration-none" target="_blank">README</a>.</p>
                        <div class="col-lg-8 text-center">
                            <h5>Resources</h5>
                            <div class="hstack gap-3 justify-content-center">
                                <a href="https://gitea.cor.bz/corbz/PYRSS-Website" class="text-body text-decoration-none" target="_blank"><i class="bi bi-git fs-3"></i></a>
                                <a href="https://en.wikipedia.org/wiki/RSS" class="text-body text-decoration-none" target="_blank"><i class="bi bi-rss-fill fs-3"></i></a>
                                <a href="https://discord.com/developers/docs/intro" class="text-body text-decoration-none" target="_blank"><i class="bi bi-discord fs-3"></i></a>
                                <a href="https://gitea.cor.bz/corbz/PYRSS-Website/src/branch/master/README.md" class="text-body text-decoration-none" target="_blank"><i class="bi bi-question-circle-fill fs-3"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="selectedServerContainer" class="row" style="display: none;">
                <div id="serverJoinAlert" class="col-12 m-0">
                    <div class="alert alert-warning rounded-1 px-sm-3 mt-2 mt-sm-4 mx-sm-2">
                        <div class="row">
                            <div class="col-xxl-10 d-flex align-items-center">
                                <div class="mb-4 mb-xxl-0">
                                    <strong>Warning:</strong>
                                    <br class="d-xxl-none">
                                    The Bot isn't a member of
                                    <span class="resolve-to-server-name"></span>,
                                    features here will not function properly, please add the bot before proceeding.
                                </div>
                            </div>
                            <div class="col-xxl-2 text-xxl-end">
                                <a class="btn btn-warning rounded-1 text-nowrap resolve-to-invite-link" target="_blank">Add PYRSS</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 bg-body-tertiary">
                    <div class="row py-3 px-sm-3">
                        <div class="col-sm-4 col-xxl-3 mb-4 mb-sm-0">
                            <div class="d-flex align-items-center">
                                <img class="resolve-to-server-icon rounded-1 me-3 text-center" width="40">
                                <div>
                                    <h5 class="resolve-to-server-name mb-0"></h5>
                                    <h6 class="resolve-to-server-id small mb-0"></h6>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-8 col-xxl-9">
                            <ul class="nav nav-pills justify-content-sm-end" role="tablist">
                                <li class="nav-item me-1 me-lg-3" role="presentation">
                                    <button id="subscriptionsTab" class="nav-link rounded-1" data-bs-toggle="tab" data-bs-target="#subscriptionsTabPane" type="button" aria-controls="subscriptionsTabPane" aria-selected="false">
                                        <i class="bi bi-layers"></i>
                                        <span class="ms-2 d-none d-lg-inline">Subscriptions</span>
                                    </button>
                                </li>
                                <li class="nav-item me-1 me-lg-3" role="presentation">
                                    <button id="filtersTab" class="nav-link rounded-1" data-bs-toggle="tab" data-bs-target="#filtersTabPane" type="button" aria-controls="filtersTabPane" aria-selected="false">
                                        <i class="bi bi-funnel"></i>
                                        <span class="ms-2 d-none d-lg-inline">Content Filters</span>
                                    </button>
                                </li>
                                <li class="nav-item me-1 me-lg-3" role="presentation">
                                    <button id="stylesTab" class="nav-link rounded-1" data-bs-toggle="tab" data-bs-target="#stylesTabPane" type="button" aria-controls="stylesTabPane" aria-selected="false">
                                        <i class="bi bi-border-style"></i>
                                        <span class="ms-2 d-none d-lg-inline">Message Styles</span>
                                    </button>
                                </li>
                                <li class="nav-item me-lg-3" role="presentation">
                                    <button id="contentTab" class="nav-link rounded-1" data-bs-toggle="tab" data-bs-target="#contentTabPane" type="button" aria-controls="contentTabPane" aria-selected="false">
                                        <i class="bi bi-archive"></i>
                                        <span class="ms-2 d-none d-lg-inline">Tracked Content</span>
                                    </button>
                                </li>
                                <li class="nav-item me-0 dropdown">
                                    <button type="button" class="nav-link dropdown-toggle rounded-1" data-bs-toggle="dropdown" data-bs-auto-close="outside">
                                        <i class="bi bi-gear"></i>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <button type="button" class="js-serverUsersBtn dropdown-item">
                                                <i class="bi bi-people"></i>
                                                <span class="ms-2">Other Users</span>
                                            </button>
                                        </li>
                                        <li>
                                            <button type="button" class="js-serverHistoryBtn dropdown-item">
                                                <i class="bi bi-clock"></i>
                                                <span class="ms-2">Edit History</span>
                                            </button>
                                        </li>
                                        <li>
                                            <hr class="dropdown-divider">
                                        </li>
                                        <li>
                                            <button type="button" class="js-closeServerBtn dropdown-item">
                                                <i class="bi bi-arrow-return-right"></i>
                                                <span class="ms-2">Close Server</span>
                                            </button>
                                        </li>
                                        <li>
                                            <button type="button" class="js-eraseServerBtn dropdown-item text-danger">
                                                <i class="bi-trash3"></i>
                                                <span class="ms-2">Delete Data</span>
                                            </button>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <div id="serverTabContent" class="tab-content">
                        <div id="subscriptionsTabPane" class="tab-pane fade" role="tabpanel" aria-labelledby="subscriptionsTab" tabindex="0">
                            {% include "home/tabs/subs.html" %}
                        </div>
                        <div id="filtersTabPane" class="tab-pane fade" role="tabpanel" aria-labelledby="filtersTab" tabindex="0">
                            {% include "home/tabs/filters.html" %}
                        </div>
                        <div id="stylesTabPane" class="tab-pane fade" role="tabpanel" aria-labelledby="stylesTab" tabindex="0">
                            {% include "home/tabs/styles.html" %}
                        </div>
                        <div id="contentTabPane" class="tab-pane fade" role="tabpanel" aria-labelledby="contentTab" tabindex="0">
                            {% include "home/tabs/content.html" %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% include "home/modals/editSub.html" %}
{% include "home/modals/editFilter.html" %}
{% include "home/modals/editStyle.html" %}
{% include "home/modals/editServer.html" %}
{% include "home/modals/modals.html" %}
{% endblock content %}

{% block javascript %}
<script id="serverItemTemplate" type="text/template">
    <li>
        <button type="button" class="sidebar-item">
            <img src="" alt="" class="sidebar-item-image js-image">
            <div class="sidebar-item-data">
                <span class="js-name"></span>
                <span class="js-id text-body-secondary font-monospace"></span>
            </div>
        </button>
    </li>
</script>
<script id="serverItemIconTemplate" type="text/template">
    <div class="dot-container m-1" data-bs-toggle="tooltip" data-bs-placement="right">
        <i class="dot-icon bg-warning "></i>
    </div>
</script>
<script id="subscriptionRecommendationTemplate" type="text/template">
    <div class="col-lg-6">
        <div class="bg-body-tertiary rounded-1 p-3 h-100 js-subRecBtn" role="button">
            <h6 class="js-title mb-3"></h6>
            <p class="js-desc mb-3"></p>
            <p class="mb-0">
                <a class="js-url text-decoration-none line-break-anywhere"></a>
            </p>
        </div>
    </div>
</script>
<script src="{% static 'js/api.js' %}"></script>
<script src="{% static 'home/js/index.js' %}"></script>
<script src="{% static 'home/js/modals.js' %}"></script>
<script src="{% static 'home/js/servers.js' %}"></script>
<script src="{% static 'home/js/tables.js' %}"></script>
<script src="{% static 'home/js/tabs/subs.js' %}"></script>
<script src="{% static 'home/js/tabs/filters.js' %}"></script>
<script src="{% static 'home/js/tabs/content.js' %}"></script>
<script src="{% static 'home/js/tabs/styles.js' %}"></script>
{% endblock javascript %}