{% load trans blocktrans from i18n %}
{% load gravatar_url from gravatar %}
{% load static from static %}

{% comment %}

Application header menu, for desktop and mobile display

This template provides some blocks that parent templates will use to override
menu display. Mostly, they are used to set the active navigation menu item.
These blocks are:

active_item
    The id of the menu item to show as active. Values are:

    ``["projects"]``

{% endcomment %}

<div class="ui basic fitted attached segment"
     data-bind="using: HeaderView()">

  {# Pass Django template tag specific configuration into ``HeaderView`` #}
  <script type="application/json" data-bind="jsonInit: config">
    {
      "api_projects_list_url": "{% url "projects-list" %}"
    }
  </script>

  <div class="ui container">
    <div class="ui middle aligned grid">

      {% block header_logo %}
        <div class="four wide computer five wide tablet eleven wide mobile left aligned column">
          <div class="ui horizontally fitted basic segment">
            <a href="{{ SITEURL }}/" aria-label="Read the Docs homepage">
              <img class="ui image"
                   src="{% static 'readthedocsext/theme/images/logo-wordmark-dark.svg' %}"
                   width="220"
                   alt="Read the Docs logo" />
            </a>
          </div>
        </div>
      {% endblock header_logo %}

      {% comment %}
        The top menu for mobile devices, doesn't show on tablet/computer.
      {% endcomment %}
      {% block header_mobile_menu %}
        <div class="five wide mobile only right aligned column">
          <div class="ui wide dropdown"
               data-bind="semanticui: {dropdown: {action: 'select'}}">
            {# Ignore "avoid inline styles" rule. Don't use this hack, this should eventually be a CSS rule instead. #}
            {# djlint:off H021 #}
            <i class="fad fa-bars large icon" style="--fa-secondary-opacity: 0.8;"></i>
            {# djlint:on #}
            <div class="menu">{% include "includes/utils/header_menus.html" %}</div>
          </div>
        </div>
      {% endblock header_mobile_menu %}

      {% comment %}
        The top menu shown on tablet/computer. Horizontal menu items instead of dropdown.
      {% endcomment %}
      {% block header_menu %}
        <div class="twelve wide computer eleven wide tablet left aligned tablet only computer only column">
          <div class="ui big borderless secondary menu">

            {% block header_left_menu %}
              {% if request.user.is_authenticated %}
                <a class="{% if active_item == "projects" %}active {% endif %} computer only item"
                   href="{% url 'projects_dashboard' %}">
                  {% trans "Projects" %}
                </a>
                {% if USE_ORGANIZATIONS %}
                  <a class="{% if active_item == "organizations" %}active {% endif %} computer only item"
                     href="{% url 'organization_list' %}">
                    {% trans "Organizations" %}
                  </a>
                {% endif %}
              {% endif %}
            {% endblock header_left_menu %}

            <div class="right menu">
              {% block header_right_menu %}

                {% block header_menu_search %}
                  {% if request.user.is_authenticated %}
                    <div class="item">
                      <div class="ui category search"
                           data-bind="semanticui: {search: search_project_config()}">
                        <div class="ui icon input">
                          <input class="prompt" type="text" placeholder="{% trans "Search projects" %}">
                          <i class="fa-duotone fa-search icon"></i>
                        </div>
                        <div class="results"></div>
                      </div>
                    </div>
                  {% endif %}
                {% endblock header_menu_search %}

                {% block header_menu_icon_menus %}
                  {% if request.user.is_authenticated %}
                    <div class="item">
                      {# Extra divs for spacing #}
                      <div>
                        <div class="ui disabled wide dropdown circular basic icon button"
                             data-bind="semanticui: {dropdown: {action: 'select', displayType: 'block'}}">
                          <i class="fa-solid fa-bell icon"></i>
                          {# TODO This feature doesn't do anything yet, see https://github.com/readthedocs/ext-theme/issues/16 #}
                          {% if False %}
                            <span class="ui floating circular red label">{{ messages|length }}</span>
                          {% endif %}
                          <div class="menu"></div>
                        </div>
                      </div>
                      <div>
                        <a class="ui circular basic icon button"
                           href="{% url 'support' %}"
                           aria-label="{% trans "Get support" %}"
                           data-content="{% trans "Get support" %}">
                          <i class="fa-solid fa-message-question icon"></i>
                        </a>
                      </div>
                    </div>
                  {% endif %}
                {% endblock header_menu_icon_menus %}

                {% block header_menu_user %}
                  {% if request.user.is_authenticated %}
                    <div class="item">
                      <div class="ui top right pointing wide dropdown"
                           data-bind="semanticui: {dropdown: {action: 'select', displayType: 'block'}}">
                        <img class="ui avatar image"
                             alt="{% trans "User avatar" %}"
                             src="{% gravatar_url request.user.email 64 %}" />
                        <i class="fa-solid fa-caret-down icon"></i>
                        <div class="wide menu">{% include "includes/utils/header_menus.html" %}</div>
                      </div>
                    </div>
                  {% else %}
                    <div class="item">
                      <a href="{% url 'account_signup' %}">{% trans "Sign up" %}</a>
                    </div>
                    <div class="item">
                      <a class="ui button" href="{% url 'account_login' %}">{% trans "Log in" %}</a>
                    </div>
                  {% endif %}
                {% endblock header_menu_user %}

              {% endblock header_right_menu %}
            </div>

          </div>
        </div>
      {% endblock header_menu %}

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