hotpocket/services/backend/hotpocket_backend/apps/ui/templates/ui/page.html

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

{% load i18n static ui %}

{% block body %}
<nav id="navbar" class="navbar navbar-expand-sm bg-body-tertiary fixed-top">
  <div class="container">
    <ul class="navbar-nav flex-row flex-grow-1">
      {% if not request.user.is_anonymous %}
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle ui-navbar-brand" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            {% spaceless %}
              <img src="{% static 'ui/img/icon-48.png' %}">
              <span class="ms-2">{% block top_nav_title %}HotPocket{% endblock %}</span>
            {% endspaceless %}
          </a>
          <ul class="dropdown-menu position-absolute">
            <li>
              <a class="dropdown-item" href="{% browse_associations_url %}">
                <i class="bi bi-house-heart-fill"></i> {% translate "Home" %}
              </a>
            </li>
            <li>
              <a class="dropdown-item" href="{% browse_associations_url mode='STARRED' %}">
                <i class="bi bi-star-fill"></i> {% translate "Starred" %}
              </a>
            </li>
            <li>
              <a class="dropdown-item" href="{% browse_associations_url mode='ARCHIVED' %}">
                <i class="bi bi-archive-fill"></i> {% translate "Archived" %}
              </a>
            </li>
          </ul>
        </li>
      {% else %}
        <li class="nav-item">
          <a class="nav-link pe-none ui-navbar-brand">
            <img src="{% static 'ui/img/icon-48.png' %}">
            <span class="ms-2">{{ SITE_TITLE }}</span>
          </a>
        </li>
      {% endif %}
      {% if not request.user.is_anonymous %}
        <li id="InlineCreateSaveForm" class="nav-item ms-auto me-1 d-flex align-items-center">
          <a class="nav-link px-1 py-0 fs-3 text-primary ui-inline-create-save-form-trigger" href="{% url 'ui.saves.create' %}">
            <i class="bi bi-plus-circle-fill"></i>
          </a>
          <form action="{% url 'ui.saves.create' %}" class="position-absolute d-none align-items-center bg-body-tertiary ui-inline-create-save-form" method="post">
            {% csrf_token %}
            <label class="visually-hidden" for="input-inline-create-save-form-url">{% translate 'URL' %}</label>
            <input class="form-control flex-grow-1 me-1 form-control-sm" id="input-inline-create-save-form-url" name="url" placeholder="{% translate 'URL' %}" type="text">
            <button class="btn btn-primary btn-sm flex-grow-0 flex-shrink-0 me-1" role="button">
              <i class="bi bi-floppy-fill"></i>
            </button>
            <button class="btn btn-outline-danger btn-sm flex-grow-0 flex-shrink-0 ui-inline-create-save-form-close">
              <i class="bi bi-x-lg"></i>
            </button>
          </form>
        </li>
      {% endif %}
      <li class="nav-item {% if request.user.is_anonymous %}ms-auto{% endif %} d-flex align-items-center">
        <a class="nav-link px-1 py-0 fs-3" data-bs-toggle="offcanvas" href="#offcanvas-controls" aria-controls="offcanvas-controls">
          <i class="bi bi-person-circle"></i>
        </a>
      </li>
    </ul>
  </div>
</nav>

<div class="ui-viewport">
  {% spaceless %}
    <div class="ui-messages container my-3">
      {% if messages %}
        {% for message in messages %}
          <div class="alert {{ message|alert_class}} mt-2">
            {{ message }}
            <button type="button" class="btn-close ui-noscript-hide" data-bs-dismiss="alert" aria-label="{% translate 'Close' %}"></button>
          </div>
        {% endfor %}
      {% endif %}
    </div>
  {% endspaceless %}

  {% block page_body %}
  {% endblock %}

  <template id="Messages-Alert">
    <div class="alert alert-dismissible fade show mt-2">
      <span class="ui-alert-message"></span>
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="{% translate 'Close' %}"></button>
    </div>
  </template>
</div>

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvas-controls" aria-labelledby="offcanvas-controls-label">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvas-controls-label">
      {% if request.user.is_anonymous %}
        {% translate 'Guest' %}
      {% else %}
        {{ request.user.get_full_name }}
      {% endif %}
    </h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="{% translate 'Close' %}"></button>
  </div>
  <div class="offcanvas-body d-flex flex-column px-0 pt-0">
    <ul class="nav flex-column flex-grow-1">
      {% if not request.user.is_anonymous %}
        <li class="nav-item">
          <a class="nav-link" href="{% url 'ui.accounts.settings' %}">
            <i class="bi bi-person-gear"></i>
            {% translate 'Account' %}
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{% url 'ui.imports.pocket' %}">
            <i class="bi bi-file-earmark-arrow-up"></i>
            {% translate 'Import from Pocket' %}
          </a>
        </li>
        <li class="nav-item mt-auto">
          <a class="nav-link" href="{% url 'ui.accounts.logout' %}">
            <i class="bi bi-box-arrow-right"></i>
            {% translate 'Log out' %}
          </a>
        </li>
      {% else %}
        <li class="nav-item">
          <a class="nav-link" href="{% url 'ui.accounts.login' %}">
            <i class="bi bi-box-arrow-in-left"></i>
            {% translate 'Log in' %}
          </a>
        </li>
      {% endif %}
    </ul>
    {% include "ui/ui/partials/uname.html" %}
  </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{% static 'ui/js/bootstrap.bundle.min.js' %}" type="text/javascript"></script>
<script src="{% static 'ui/js/htmx.min.js' %}" type="text/javascript"></script>
<script src="{% static 'ui/js/hotpocket-backend.js' %}" type="text/javascript"></script>
<script src="{% static 'ui/js/hotpocket-backend.htmx.js' %}" type="text/javascript"></script>
<script src="{% static 'ui/js/hotpocket-backend.htmx.confirm.js' %}" type="text/javascript"></script>
<script src="{% static 'ui/js/hotpocket-backend.ui.js' %}" type="text/javascript"></script>
<script src="{% static 'ui/js/hotpocket-backend.ui.Form.js' %}" type="text/javascript"></script>
<script src="{% static 'ui/js/hotpocket-backend.ui.Messages.js' %}" type="text/javascript"></script>
<script src="{% static 'ui/js/hotpocket-backend.ui.Modal.js' %}" type="text/javascript"></script>
<script src="{% static 'ui/js/hotpocket-backend.ui.BrowseSavesView.js' %}" type="text/javascript"></script>
<script src="{% static 'ui/js/hotpocket-backend.ui.ViewAssociationView.js' %}" type="text/javascript"></script>
<script src="{% static 'ui/js/hotpocket-backend.ui.BrowseAccountAppsView.js' %}" type="text/javascript"></script>
<script src="{% static 'ui/js/hotpocket-backend.ui.InlineCreateSaveForm.js' %}" type="text/javascript"></script>
<script src="{% static 'ui/js/hotpocket-backend.ui.PasteboardLink.js' %}" type="text/javascript"></script>
{% block page_scripts %}{% endblock %}
<script type="text/javascript">
(() => {
  window.HotPocket.run({
    debug: {% if DEBUG %}true{% else %}false{% endif %},
  });
})();
</script>
{% endblock %}