{% extends "includes/crud/table_list.html" %}

{% load has_github_app_account from readthedocs.socialaccounts %}
{% load blocktrans trans from i18n %}
{% load can_be_disconnected from readthedocs.socialaccounts %}

{% load get_account_username from ext_theme_tags %}

{% block top_menu %}
  {% if form.non_field_errors %}
    <div class="ui error message">{{ form.non_field_errors }}</div>
  {% endif %}
  {{ block.super }}
{% endblock top_menu %}
{% block top_left_menu_items %}
{% endblock top_left_menu_items %}

{% block create_button %}
  <div class="ui green button"
       data-bind="click: $root.show_modal('socialaccount-connections')">
    {% trans "Add new connection" %}
  </div>
{% endblock create_button %}

{% block list_placeholder_icon_class %}
  fa-duotone fa-user-unlock
{% endblock list_placeholder_icon_class %}
{% block list_placeholder_header %}
  {% blocktrans trimmed %}
    Your account is not connected to any services.
  {% endblocktrans %}
  <div class="sub header">
    {% blocktrans trimmed %}
      Add a new connection to to enable automatic import and
      configuration of new projects.
    {% endblocktrans %}
  </div>
{% endblock list_placeholder_header %}
{% block list_placeholder_text %}
  <a class="ui button"
     href="https://docs.readthedocs.io/en/stable/guides/connecting-git-account.html"
     aria-label="{% trans "Learn more about this feature in our documentation pages" %}"
     target="_blank">{% trans "Learn more" %}</a>
{% endblock list_placeholder_text %}

{% block list_item_right_menu %}
  {% if object.get_provider.id == "github" %}
    <div class="ui small buttons">
      {% if object|has_github_app_account %}
        <a class="ui secondary button"
           data-content="{% trans "Complete migration to GitHub App" %}"
           href="{% url "migrate_to_github_app" %}"
           target="_blank">{% trans "Migrate" %}</a>
      {% else %}
        <a class="ui secondary button"
           data-content="{% trans "Migrate to GitHub App" %}"
           href="{% url "migrate_to_github_app" %}"
           target="_blank">{% trans "Migrate" %}</a>
      {% endif %}
    </div>
  {% endif %}

  <div class="ui small icon buttons">
    {% if object.get_provider.id == "githubapp" %}
      <a class="ui icon button"
         data-content="{% trans "Manage GitHub App on GitHub" %}"
         href="https://github.com/apps/{{ GITHUB_APP_NAME }}/installations/new/"
         target="_blank">
        <i class="fad fa-wrench icon"></i>
      </a>
    {% endif %}

    <form method="post" action="{% url 'socialaccount_connections' %}">
      {% csrf_token %}
      <input type="hidden" name="account" value="{{ object.id }}" />
      <button class="ui button {% if not object|can_be_disconnected %}disabled{% endif %}"
              data-content="{% trans "Disconnect account" %}">
        <i class="fas fa-trash icon"></i>
      </button>
    </form>
  </div>
{% endblock list_item_right_menu %}

{% block list_item_image %}
  {% with avatar_url=object.get_avatar_url %}
    {% if avatar_url %}
      <img class="ui rounded image"
           src="{{ avatar_url }}"
           height="28"
           alt="{% trans "Social account avatar" %}"
           width="28" />
    {% else %}
      <div class="ui center aligned image">
        <i class="fad fa-user icon"></i>
      </div>
    {% endif %}
  {% endwith %}
{% endblock list_item_image %}

{% block list_item_header %}
  {{ object|get_account_username }}
  <div class="sub header">
    {% blocktrans with time_since=object.last_login|timesince trimmed %}
      Logged in {{ time_since }} ago
    {% endblocktrans %}
  </div>
{% endblock list_item_header %}

{% block list_item_meta_items %}
  {% with provider=object.get_provider %}
    {% if provider.app.pk and provider.id == "saml" %}
      <span class="ui label">
        <i class="fas fa-users icon"></i>
        {% trans "SAML" %}
      </span>
    {% else %}
      {# Provider is not a database provider #}
      <span class="ui label">
        <i class="fa-brands fa-{{ provider.name|lower }} icon"></i>
        {{ provider.app.name|default:provider.name }}
      </span>
    {% endif %}
  {% endwith %}
{% endblock list_item_meta_items %}

{% block list_item_extra %}
{% endblock list_item_extra %}