{% load blocktrans trans from i18n %}
{% load is_admin from privacy_tags %}
{% load gravatar_url from gravatar %}
{% load get_spam_score readthedocs_language_name readthedocs_language_name_local starts_with from ext_theme_tags %}
{% load get_project_active_versions from projects_tags %}

{% comment %}

This template is the header at the top of project dashboard pages. There are
two modes to this header, full and collapsed. The header always starts off as
collapsed, to save visual space and can be expanded with the right label.

{% endcomment %}

{% block project_header %}
  <div class="ui top attached segment"
       data-bind="using: CollapsingHeaderView(true)">

    {% block project_header_metadata %}
      <div class="ui stacking grid">

        {% block project_header_title %}
          <div class="eight wide computer eight wide tablet sixteen wide mobile middle aligned column">
            {% include "projects/includes/project_image.html" with project=project classes="micro rounded right spaced inline" %}
            <a class="ui medium text" href="{{ project.get_absolute_url }}">{{ project.name | default:project.slug }}</a>
          </div>
        {% endblock project_header_title %}

        {% block project_header_labels %}
          <div class="right aligned eight wide computer eight wide tablet sixteen wide left aligned mobile middle aligned column">
            {% include "includes/components/config_label.html" with icon="fa-solid fa-language" text=project.language|upper popup=project.language|readthedocs_language_name_local %}
            {% for organization in project.organizations.all %}
              {% include "includes/components/config_label.html" with icon="fa-solid fa-building" text=organization.name url=organization.get_absolute_url %}
            {% endfor %}

            {# The dropdown action button, to swap between expanded/collapsed #}
            <a class="ui icon primary label"
               data-bind="click: toggle_collapsed"
               data-content="{% trans "More project information" %}">
              <i class="fas fa-caret-down icon" data-bind="class: dropdown_class"></i>
            </a>
          </div>
        {% endblock project_header_labels %}

        {% block project_header_metadata_left %}
          <div class="eight wide computer eight wide tablet sixteen wide mobile column ko hidden"
               data-bind="css: { hidden: is_collapsed() }">

            {% block project_header_description %}
              {% if project.description %}
                <p>{{ project.description|truncatewords:15 }}</p>
              {% endif %}
            {% endblock project_header_description %}

            {% block project_header_tags %}
              {# Manual tags #}
              {% for tag in project.tags.all %}
                <a class="ui teal basic label"
                   href="{% url "projects_tag_detail" tag.slug %}">{{ tag.name }}</a>
              {% endfor %}
            {% endblock project_header_tags %}

            {% block project_header_related_projects %}
              {% if project.superproject or project.subprojects.exists %}
                <div class="ui sub header">{% trans "Related projects" %}</div>
                <div class="ui relaxed horizontal list">
                  {% if project.superproject %}
                    <div class="item">
                      {% include "includes/elements/chips/project.html" with project=project.superproject detail=_("Parent project") %}
                    </div>
                  {% endif %}
                  {# TODO this list probably needs to respect user permissions #}
                  {% for project_rel in project.subprojects.all %}
                    <div class="item">
                      {% include "includes/elements/chips/project.html" with project=project_rel.child detail=_("Subproject") %}
                    </div>
                  {% endfor %}
                </div>
              {% endif %}
            {% endblock project_header_related_projects %}

            {% block project_header_translations %}
              {% with translations=project.main_language_project.translations|default:project.translations %}
                {% if translations.exists %}
                  <div class="ui sub header">{% trans "Translations" %}</div>
                  <div class="ui horizontal list">
                    {% with project_translation=project.main_language_project|default:project %}
                      {% if not project_translation == project %}
                        <div class="item">
                          {% include "includes/elements/chips/project.html" with project=project_translation detail=project_translation.language|readthedocs_language_name %}
                        </div>
                      {% endif %}
                    {% endwith %}
                    {% for project_translation in translations.all %}
                      {% if not project_translation == project %}
                        <div class="item">
                          {% include "includes/elements/chips/project.html" with project=project_translation detail=project_translation.language|readthedocs_language_name %}
                        </div>
                      {% endif %}
                    {% endfor %}
                  </div>
                {% endif %}
              {% endwith %}
            {% endblock project_header_translations %}

          </div>
        {% endblock project_header_metadata_left %}

        {% block project_header_metadata_right %}
          <div class="right aligned eight wide computer eight wide tablet sixteen wide mobile column ko hidden"
               data-bind="css: { hidden: is_collapsed() }">

            {% block project_header_maintainers %}
              <div class="ui sub header">{% trans "Maintainers" %}</div>

              {# TODO project teams and organization #}

              <div class="ui overlapping avatar images">
                {% for user in project.users.all|slice:":8" %}
                  <a href="{% url "profiles_profile_detail" user.username %}">
                    <img alt="{% blocktrans with usernamename=user.username %}User {{ username }} avatar{% endblocktrans %}"
                         class="ui image"
                         src="{% gravatar_url user.email 32 %}" />
                  </a>
                {% endfor %}

                {% with other_maintainers=project.users.all|slice:"8:"|length %}
                  {% if other_maintainers %}
                    <span>{% trans "... and {other_maintainers} others" %}</span>
                  {% endif %}
                {% endwith %}

              </div>
            {% endblock project_header_maintainers %}

            {% block project_header_repository %}
              <div class="ui sub header">{% trans "Repository" %}</div>

              {% if project.remote_repository %}
                {% with repo=project.remote_repository %}
                  <a href="{{ repo.html_url }}" class="ui basic image nowrap label">
                    <img alt="{% blocktrans with name=project.name %}Project {{ name }} avatar{% endblocktrans %}"
                         src="{{ repo.avatar_url }}" />
                    <code>{{ repo.full_name }}</code>
                  </a>
                {% endwith %}
              {% elif project.repo|starts_with:"https://" %}
                <a href="{{ project.repo }}" class="ui basic nowrap label">
                  <i class="fas fa-code-fork icon"></i>
                  <code>{{ project.repo }}</code>
                </a>
              {% else %}
                <div class="ui basic nowrap label">
                  <i class="fas fa-code-fork icon"></i>
                  <code>{{ project.repo }}</code>
                </div>
              {% endif %}
            {% endblock project_header_repository %}
          </div>
        {% endblock project_header_metadata_right %}

      </div>
    {% endblock project_header_metadata %}

  </div>

  {% block project_header_navigation %}
    <div class="ui bottom attached stackable menu">
      <a class="item {{ overview_active }}"
         href="{{ project.get_absolute_url }}">
        {% trans "Versions" %}
        {% get_project_active_versions project request.user as active_versions %}
        <span class="ui tiny teal circular label">{{ active_versions.count }}</span>
      </a>
      <a class="item {{ builds_active }}" href="{{ project.get_builds_url }}">
        {% trans "Builds" %}
        <span class="ui tiny teal circular label">{{ project.builds.count }}</span>
      </a>
      <div class="right menu">
        {# Show top-level view docs button on non-build pages with a good build #}
        {% if project.has_good_build and not build %}
          <a class="item" href="{{ project.get_docs_url }}">
            <i class="fa-duotone fa-book icon"></i>
            {% trans "View docs" %}
          </a>
        {% endif %}
        {% if request.user|is_admin:project %}
          {% if request.user.is_staff %}
            <a class="item" data-bind="click: $root.show_modal('project-debug')">
              <i class="fa-duotone fa-microscope icon"></i>
              {% trans "Debug" %}
            </a>
          {% endif %}
          <a class="item {{ edit_active }}"
             href="{% url "projects_edit" project.slug %}">
            <i class="fa-duotone fa-gears icon"></i>
            {% trans "Settings" %}
          </a>
        {% endif %}
      </div>
    </div>

    {% if request.user.is_staff %}
      <div class="ui mini modal" data-modal-id="project-debug">
        <div class="header">{% trans "Debug information" %}</div>
        {% comment %}
          Show spam information on community instance.
          Allows us to quickly understand what's the spam score,
          and also know what rules are matching this project.
        {% endcomment %}
        <div class="content">
          <h3>{% trans "Admin" %}</h3>
          <div class="ui vertical list">
            <div class="item">
              <a href="{{ ADMIN_URL }}/projects/project/{{ project.pk }}/change/"
                 target="_blank">{% trans "View project in Django admin" %}</a>
            </div>
            <div class="item">
              <a href="{{ ADMIN_URL }}/projects/project/?slug={{ project.slug }}"
                 target="_blank">{% trans "View project changelist filtered by slug" %}</a>
            </div>
          </div>

          {% if not USE_ORGANIZATIONS %}
            <h3>{% trans "Spam" %}</h3>
            <div class="ui sub header">{% trans "Spam score" %}</div>
            <span>{{ project|get_spam_score }}</span>
            {% if project.spam_rules.exists %}
              <div class="ui sub header">{% trans "Spam matching rules" %}</div>
              <div class="ui vertical list">
                {% for rule in project.spam_rules.all %}
                  <div class="item">
                    <a href="{{ ADMIN_URL }}/spamfighting/spamrule/{{ rule.pk }}/change/"
                       target="_blank">{{ rule.spam_rule_type|cut:"readthedocsext.spamfighting.rules." }}</a>
                  </div>
                {% endfor %}
              </div>
            {% endif %}
          {% endif %}
        </div>
        <div class="actions">
          <a href="#" class="ui negative button">{% trans "Close" %}</a>
        </div>
      </div>
    {% endif %}
  {% endblock project_header_navigation %}

{% endblock project_header %}