{% load projectroles_common_tags %}
{% get_django_setting 'PROJECTROLES_DISABLE_CATEGORIES' as disable_categories %}

<div class="card" id="sodar-pr-project-list">
  <div class="card-header">
    <h4>
      {% if not parent %}
        <i class="iconify" data-icon="mdi:earth"></i>
        {% if request.user.is_superuser %}
           All
        {% elif request.user.is_authenticated %}
          Your
        {% else %}
          Public
        {% endif %}
          {% get_display_name 'PROJECT' title=True plural=True %}
      {% else %}
        <i class="iconify" data-icon="mdi:rhombus-split"></i>
        {% get_display_name 'PROJECT' title=True plural=True %}
      {% endif %}
      <div class="input-group sodar-header-input-group
                  sodar-pr-project-list-input-group pull-right">
        {% if request.user.is_authenticated %}
          <div class="input-group-prepend">
            <button class="btn btn-secondary"
                    type="submit"
                    id="sodar-pr-project-list-link-star"
                    disabled="disabled"
                    data-star-enabled="0">
              <i class="iconify" data-icon="mdi:star-outline"></i> Starred
            </button>
          </div>
        {% endif %}
        <select class="form-control" id="sodar-pr-project-list-page-length">
          <option selected value="{{ page_options_default }}">Page</option>
          <option value="10">10</option>
          <option value="25">25</option>
          <option value="50">50</option>
          <option value="100">100</option>
          <option value="-1">All</option>
        </select>
        <input class="form-control"
               type="text"
               placeholder="Filter"
               disabled="disabled"
               aria-label="Filter {% get_display_name 'PROJECT' title=False plural=True %}"
               id="sodar-pr-project-list-filter" />
      </div>
    </h4>
  </div>
  <div class="card-body p-0">
    <table class="table table-striped sodar-card-table sodar-pr-project-list-table"
           id="sodar-pr-project-list-table"
           data-list-url="{% url 'projectroles:ajax_project_list' %}{% if parent %}?parent={{ parent.sodar_uuid }}{% endif %}"
           data-custom-col-url="{% url 'projectroles:ajax_project_list_columns' %}"
           data-role-url="{% url 'projectroles:ajax_project_list_roles' %}"
           data-parent="{% if parent %}{{ parent.sodar_uuid }}{% endif %}"
           data-starred-default="{{ project_list_starred_default|yesno:'1,0' }}">
      <thead id="sodar-pr-project-list-header">
        <tr class="sodar-pr-project-list-header">
          <th id="sodar-pr-project-list-header-project">
            {% if not disable_categories %}
              {% get_display_name 'CATEGORY' title=True %} /
            {% endif %}
            {% get_display_name 'PROJECT' title=True %}
          </th>
          {% for col in project_custom_cols %}
            <th id="sodar-pr-project-list-header-{{ col.app_plugin.name }}-{{ col.column_id }}"
                class="sodar-pr-project-list-custom-header text-nowrap {% if col.align %}text-{{ col.align }}{% endif %}"
                {% if col.width %} style="width: {{ col.width }}px !important"{% endif %}
                data-app-name="{{ col.app_plugin.name }}"
                data-column-id="{{ col.column_id }}"
                data-align="{{ col.align }}">
              {{ col.title }}
              {% if col.description %}
                {% get_info_link col.description as info_link %}
                {{ info_link | safe }}
              {% endif %}
            </th>
          {% endfor %}
          {% if not request.user.is_superuser %}
            <th id="sodar-pr-project-list-header-role">Your&nbsp;Role</th>
          {% endif %}
        </tr>
      </thead>
      <tbody>
        <tr id="sodar-pr-project-list-loading">
          <td class="text-center text-muted sodar-pr-project-list-load-td"
              colspan="{{ project_col_count }}">
            <i class="iconify spin sodar-pr-project-list-load-icon mt-2"
               data-icon="mdi:loading" data-height="48">
            </i>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
