{% extends 'projectroles/base.html' %}

{% load projectroles_common_tags %}

{% block title %}Remote {% get_display_name 'PROJECT' title=True plural=True %} for {{ site.name }} {% endblock %}

{% block css %}
  {{ block.super }}
  <style type="text/css">
    .table#sodar-pr-remote-project-table {
        table-layout: fixed;
    }

    .table#sodar-pr-remote-project-table thead tr th:last-child,
    .table#sodar-pr-remote-project-table tbody tr td:last-child {
      width: 250px;
      min-width: 250px;
    }

    .table#sodar-pr-remote-project-table thead tr th:nth-child(2),
    .table#sodar-pr-remote-project-table tbody tr td:nth-child(2) {
      width: 170px;
      min-width: 170px;
    }

    @media screen and (max-width: 900px) {
      .table#sodar-pr-remote-project-table thead tr th:nth-child(2),
      .table#sodar-pr-remote-project-table tbody tr td:nth-child(2) {
        display: none;
      }
    }
  </style>
{% endblock css %}

{% block projectroles %}

{% get_django_setting 'PROJECTROLES_SITE_MODE' as site_mode %}

<div class="row sodar-subtitle-container">
  <h2><i class="iconify" data-icon="mdi:cloud-{% if site_mode == 'SOURCE' %}upload{% else %}download{% endif %}"></i>
      {{ site.name }}</h2>
  <a role="button" class="btn btn-secondary ml-auto"
     href="{% url 'projectroles:remote_sites' %}">
    <i class="iconify" data-icon="mdi:arrow-left-circle"></i> Back to Site List
  </a>
</div>

<div class="container-fluid sodar-page-container">

  {% if projects|length == 0 %}
    <div class="alert alert-info">
      No projects are available.
      {% if site_mode == 'TARGET' %}
        To retrieve remote {% get_display_name 'PROJECT' %} data,
        <a href="{% url 'projectroles:remote_projects_sync' remotesite=site.sodar_uuid %}">synchronize with the source site</a>
        or use the <code>syncremote</code> management command.
      {% endif %}
    </div>

  {% else %}
    <form method="post" action="{% url 'projectroles:remote_projects_update' remotesite=site.sodar_uuid %}">
      {% csrf_token %}

      <div class="card mb-3">
        <div class="card-header">
          <h4>
            <i class="iconify" data-icon="mdi:rhombus-split"></i>
            {% if site_mode == 'SOURCE' %}Target{% else %}Source{% endif %} {% get_display_name 'PROJECT' title=True plural=True %}
          </h4>
        </div>
        <div class="card-body p-0">
          <table class="table table-striped sodar-card-table"
                 id="sodar-pr-remote-project-table">
            <thead>
              <tr>
                <th>{% get_display_name 'PROJECT' title=True %}</th>
                <th>Accessed</th>
                <th>Level</th>
              </tr>
            </thead>
            <tbody>
              {% for project in projects %}
                {% include 'projectroles/_remote_project_list_item.html' %}
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>

      {% if site_mode == 'SOURCE' %}
        <div class="container-fluid text-right">
          <button type="submit" class="btn btn-primary">
            <i class="iconify" data-icon="mdi:lead-pencil"></i>
            Update {% get_display_name 'PROJECT' title=True %} Access
          </button>
        </div>
      {% endif %}

    </form>
  {% endif %}

</div>

{% endblock projectroles %}
