78 lines
3.4 KiB
HTML

{% extends 'layouts/base.html' %}
{% load static %}
{% block title %}{% endblock title %}
{% block stylesheets %}
<link type="text/css" rel="stylesheet" href="{% static '/css/home/index.css' %}">
<link type="text/css" rel="stylesheet" href="{% static '/css/home/select2.css' %}">
{% endblock stylesheets %}
{% block content %}
<div class="container h-100">
<div class="d-flex flex-nowrap h-100 border-start border-end">
<div class="d-flex flex-column flex-shrink-0 bg-body-tertiary py-3 border-end" 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-3"></li> -->
<li class="nav-item">
<button type="button" id="newServerBtn" class="btn btn-outline-primary rounded-circle mt-1" style="width: 46px; height: 46px;">
<i class="bi bi-plus-lg fs-5"></i>
</button>
</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 border-bottom">
<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">
<div class="d-flex px-3 pt-4 pb-2 justify-content-end">
<button type="button" id="tableAddRowBtn" class="btn btn-primary me-3">
<i class="bi bi-plus-lg"></i>
</button>
<button type="button" id="tableDeleteSelectedBtn" class="btn btn-danger" disabled>
<i class="bi bi-trash3"></i>
</button>
<!-- <button type="button" id="tableButton" class="btn btn-outline-primary">See 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="" data-bs-toggle="tooltip" data-bs-placement="right">
<button type="button" class="btn border-0 server-item-selector">
<img src="" alt="Guild Icon" class="rounded-circle" width="46" height="46">
</button>
</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 %}