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

{% load i18n static ui %}

{% block page_head %}
  {% for head_include in PAGE_INCLUDES.head %}
    {% include head_include %}
  {% endfor %}
{% endblock %}

{% 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>
        <li class="nav-item px-3 d-flex justify-content-center">
          {% spaceless %}
            <a
              class="btn btn-outline-info btn-sm"
              href="https://apps.apple.com/pl/app/hotpocket-by-bthlabs/id6752321380"
              rel="noopener noreferrer"
              target="_blank"
              title="{% translate 'Safari and Share extension for iOS and macOS' %}"
            >
              <i class="bi bi-apple"></i> 
            </a>
            <a
              class="btn btn-outline-info btn-sm ms-1"
              href="https://chromewebstore.google.com/detail/save-to-hotpocket/mkmoejhhgnadmijpgkkioicjmikkkjbd"
              rel="noopener noreferrer"
              target="_blank"
              title="{% translate 'Chrome extension' %}"
            >
              <i class="bi bi-browser-chrome"></i> 
            </a>
            <a
              class="btn btn-outline-info btn-sm ms-1"
              href="https://addons.mozilla.org/en-GB/firefox/addon/save-to-hotpocket/"
              rel="noopener noreferrer"
              target="_blank"
              title="{% translate 'Firefox extension' %}"
            >
              <i class="bi bi-browser-firefox"></i> 
            </a>
            <a
              class="btn btn-outline-info btn-sm ms-1"
              data-bs-toggle="modal"
              data-bs-target="#modalPWA"
              href="#"
              title="{% translate 'Android PWA' %}"
            >
              <i class="bi bi-android2"></i> 
            </a>
            <div class="vr my-1 ms-1 opacity-75"></div>
            <a
              class="btn btn-outline-info btn-sm ms-1"
              href="https://git.bthlabs.pl/tomekwojcik/hotpocket"
              rel="noopener noreferrer"
              target="_blank"
              title="{% translate 'Source code repository' %}"
            >
              <i class="bi bi-git"></i> 
            </a>
          {% endspaceless %}
        </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>

{% if not request.user.is_anonymous %}
  <div class="modal modal-fade" id="modalPWA" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="modalPWALabel">
            {% translate 'HotPocket on Android and others' %}
          </h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p class="mb-1">
            {% blocktranslate %}
              HotPocket doesn't natively support Android and other systems. However, it's a Progressive Web Application. You can install it from your browser and it'll register itself as share target.
            {% endblocktranslate %}
          </p>
          <p class="mb-0">
            {% blocktranslate %}
              This is currently supported on Android and Windows 11 (when installed using Edge).
            {% endblocktranslate %}
          </p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-bs-dismiss="modal">
            {% translate 'Cool' %}
          </button>
        </div>
      </div>
    </div>
  </div>
{% endif %}
{% 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>
{% for script_include in PAGE_INCLUDES.script %}
  {% include script_include %}
{% endfor %}
{% block page_scripts %}
{% endblock %}
<script type="text/javascript">
(() => {
  window.HotPocket.run({
    debug: {% if DEBUG %}true{% else %}false{% endif %},
  });
})();
</script>
{% endblock %}