{% extends "includes/elements/chips/base.html" %}

{% load trans from i18n %}
{% load readthedocs_language_name starts_with from ext_theme_tags %}

{% block chip_view_params %}
  '{% url "projects-detail" project.slug %}'
{% endblock chip_view_params %}

{% block chip_url %}
  {{ project.get_absolute_url }}
{% endblock chip_url %}

{% block chip_classes %}
  basic image
{% endblock chip_classes %}

{% block chip_icon %}
  {% include "projects/includes/project_image.html" with project=project classes="micro rounded" %}
{% endblock chip_icon %}

{% block chip_text %}
  {{ project.name }}
{% endblock chip_text %}

{% block chip_detail_text %}
  {{ detail }}
{% endblock chip_detail_text %}

{% block popupcard_image %}
{% endblock popupcard_image %}

{% block popupcard_header %}
  {{ project.name }}
{% endblock popupcard_header %}

{% block popupcard_right %}
  {% include "projects/includes/project_image.html" with project=project classes="mini right floated rounded" %}
{% endblock popupcard_right %}

{% block popupcard_meta %}
  {# TODO slug is not helpful, use a summary of versions instead? Link to versions! #}
  {{ project.slug }}
{% endblock popupcard_meta %}

{% block popupcard_content %}
  <div class="ui small list">

    <div class="item">
      <i class="fad fa-code-fork icon"></i>
      <div class="content">
        <div class="header">{% trans "Repository" %}</div>
        <div class="description">
          {% if project.remote_repository %}
            {% with repo=project.remote_repository %}
              <a href="{{ repo.html_url }}">{{ repo.full_name }}</a>
            {% endwith %}
          {% elif project.repo|starts_with:"https://" %}
            <a href="{{ project.repo }}">{{ project.repo }}</a>
          {% else %}
            {{ project.repo }}
          {% endif %}
        </div>
      </div>
    </div>

    <div class="item">
      <i class="fad fa-book icon"></i>
      <div class="content">
        <div class="header">{% trans "Documentation" %}</div>
        <div class="description">
          <a data-bind="text: urls.documentation, attr: { href: urls.documentation }"></a>
        </div>
      </div>
    </div>

  </div>
{% endblock popupcard_content %}

{% block popupcard_extra %}
  <div class="right floated">
    <a data-bind="attr: { href: urls.documentation }">
      <i class="fad fa-book icon"></i>
      {% trans "View docs" %}
    </a>
  </div>
  <span>
    <i class="fa-solid fa-language icon"></i>
    {{ project.language|readthedocs_language_name }}
  </span>
{% endblock popupcard_extra %}