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

{% load rules %}
{% load static %}

{# Projectroles dependency #}
{% load projectroles_common_tags %}

{% load filesfolders_tags %}

{% block title %}
  Files for {{ project.title }}{% if folder %} / {{ folder.name }}{% endif %}
{% endblock title %}

{% block css %}
  {{ block.super }}
  <style type="text/css">
    .table#sodar-ff-list-table tr td:nth-child(1) {
      padding-right: 0;
      width: 20px;
    }
    .table#sodar-ff-list-table tr td:nth-child(2) {
      padding-left: 4px;
    }
    .table#sodar-ff-list-table tr td:nth-child(6) {
      white-space: nowrap;
    }
    .table#sodar-ff-list-table tr td:nth-child(7) {
      width: 25px !important;
    }
    .table#sodar-ff-list-table tr td:nth-child(8) {
      width: 15px !important;
    }

    /* Responsive modifications */
    @media screen and (max-width: 1200px) {
      .table#sodar-ff-list-table tr th:nth-child(4),
      .table#sodar-ff-list-table tr td:nth-child(5) {
        display: none;
      }
    }
    @media screen and (max-width: 900px) {
      .table#sodar-ff-list-table tr th:nth-child(5),
      .table#sodar-ff-list-table tr td:nth-child(6) {
        display: none;
      }
    }
    @media screen and (max-width: 750px) {
      .table#sodar-ff-list-table tr th:nth-child(3),
      .table#sodar-ff-list-table tr td:nth-child(4){
        display: none;
      }
    }
    @media screen and (max-width: 500px) {
      .table#sodar-ff-list-table tr th:nth-child(2),
      .table#sodar-ff-list-table tr td:nth-child(3) {
        display: none;
      }
    }
  </style>
{% endblock css %}

{% block projectroles_extend %}

{# Projectroles dependency #}
{% has_perm 'filesfolders.view_data' request.user project as can_view_data %}
{% has_perm 'filesfolders.add_data' request.user project as can_add_data %}
{% has_perm 'filesfolders.update_data_own' request.user project as can_update_own %}
{% has_perm 'filesfolders.update_data_all' request.user project as can_update_all %}
{% has_perm 'filesfolders.share_public_link' request.user project as can_share_link %}

{% if can_view_data %}
  <div class="row sodar-subtitle-container bg-white sticky-top">
    <h3><i class="iconify" data-icon="mdi:file"></i> Files</h3>
    {% if can_add_data %}
      {% include 'filesfolders/_file_ops.html' with project=project folder=folder up=False %}
    {% endif %}
  </div>

  <div class="container-fluid sodar-page-container">
    {% if folder %}
      <form method="post" action="{% url 'filesfolders:batch_edit' folder=folder.sodar_uuid %}" id="sodar-ff-batch-form">
    {% else %}
      <form method="post" action="{% url 'filesfolders:batch_edit' project=project.sodar_uuid %}" id="sodar-ff-batch-form">
    {% endif %}
      {% csrf_token %}
      <input type="hidden" id="sodar-ff-batch-form-action" name="batch-action" value="" />
      <input type="hidden" id="sodar-ff-user-confirmed" name="user-confirmed" value="0" />
      <div class="card" id="sodar-ff-file-list">
        <div class="card-body p-0" id="sodar-ff-breadcrumb-card">
          <!-- Breadcrumb -->
          <ol id="sodar-ff-breadcrumb" class="breadcrumb sodar-breadcrumb-table">
            {% if not folder %}
              <li class="breadcrumb-item active">
                <i class="iconify mt-1" data-icon="mdi:chevron-right"
                   id="sodar-ff-breadcrumb-icon"></i>
                root
              </li>
            {% else %}
              <li class="breadcrumb-item">
                <i class="iconify mt-1" data-icon="mdi:chevron-right"></i>
                <a href="{% url 'filesfolders:list' project=project.sodar_uuid %}">root</a>
              </li>
              {% for f in folder_breadcrumb %}
                {% if f != folder %}
                  <li class="breadcrumb-item"><a href="{% url 'filesfolders:list' folder=f.sodar_uuid %}">{{ f.name }}</a></li>
                {% else %}
                  <li class="breadcrumb-item active">{{ f.name }}</li>
                {% endif %}
              {% endfor %}
            {% endif %}
          </ol>
        </div>
        <div class="card-body p-0">
          <table class="table table-striped sodar-card-table" id="sodar-ff-list-table">
            <thead>
              {% include 'filesfolders/_list_header.html' with details_card_mode=False %}
            </thead>
            <tbody id="sodar-ff-list-content">
              <!-- Folders -->
              {% if folder %} {# Display if current folder is not root #}
                <tr>
                  <td><i class="iconify" data-icon="mdi:folder"></i></td>
                  <td>
                    {% if folder.folder %}
                      <a href="{% url 'filesfolders:list' folder=folder.folder.sodar_uuid %}">.. /</a>
                    {% else %}
                      <a href="{% url 'filesfolders:list' project=project.sodar_uuid %}">.. /</a>
                    {% endif %}
                  </td>
                  <td></td>
                  <td>Parent Folder</td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                </tr>
              {% endif %}
              {% for folder in folders %}
                {% include 'filesfolders/_file_item.html' with item=folder %}
              {% endfor %}
              {# External links #}
              {% for link in links %}
                {% include 'filesfolders/_file_item.html' with item=link %}
              {% endfor %}
              {# Files #}
              {% if files.count > 0 %}
                {% for file in files %}
                  {% include 'filesfolders/_file_item.html' with item=file %}
                {% endfor %}
              {% endif %}
              {% if folders.count == 0 and links.count == 0 and files.count == 0 %}
                <tr>
                  <td class="bg-faded font-italic text-center" colspan="8">
                    Empty folder
                  </td>
                </tr>
              {% endif %}
             </tbody>
          </table>
        </div> {# Table card block #}
      </div> {# Card #}
    </form>
    {# Folder ReadMe #}
    {% if readme_data %}
      <div class="card" id="sodar-ff-readme-card">
        <div class="card-header">
          <h4>
            <i class="iconify" data-icon="mdi:book-open-page-variant"></i>
            Folder ReadMe ({{ readme_name }})
          </h4>
        </div>
        {% if readme_alt %}
          <div class="card-body sodar-card-body-info">
            <i class="iconify" data-icon="mdi:information"></i>
            File "{{ readme_alt }}" also found in folder
          </div>
        {% endif %}
        <div class="card-body">
          {% if readme_mime == 'text/plain' %}
            <pre>{{ readme_data|wordwrap:79 }}</pre>
          {% elif readme_mime == 'text/markdown' %}
            {% render_markdown readme_data as readme_markdown %}
            <p>{{ readme_markdown|safe }}</p>
          {% endif %}
        </div>
      </div>
    {% endif %}
  </div>
{% else %}
  <div class="alert alert-danger" role="alert">
    Insufficient permissions for viewing {% get_display_name 'PROJECT' %} files!
  </div>
{% endif %}

{% endblock projectroles_extend %}

{% block javascript %}
  {{ block.super }}
  <!-- Filesfolders Javascript -->
  <script type="text/javascript" src="{% static 'filesfolders/js/filesfolders.js' %}"></script>

  <!-- Tour content -->
  <script type="text/javascript">
    tourEnabled = true
    tour.addStep('files', {
      title: 'The Files App',
      text: 'In this app you can browse and manage files and hyperlinks in ' +
            'a folder structure. The files are stored in the database of the ' +
            'site.',
      advanceOn: '.docs-link click',
      showCancelLink: true
    })
    tour.addStep('files_breadcrumb', {
      title: 'Files Breadcrumb',
      text: 'This element displays the path breadcrumb for the current ' +
            'folder for quick navigation. Click on parent folders to ' +
            'navigate to them.',
      attachTo: '#sodar-ff-breadcrumb-card top',
      advanceOn: '.docs-link click',
      showCancelLink: true
    })
    tour.addStep('files_table', {
      title: 'Files Table',
      text: 'In this table you see the files, hyperlinks and folders ' +
            'contained in the current folder. Through this table you can ' +
            'browse between categories, access files and hyperlinks and ' +
            'manage them.',
      attachTo: '#sodar-ff-list-table top',
      advanceOn: '.docs-link click',
      showCancelLink: true
    })
    tour.addStep('file_item', {
      title: 'File Items',
      text: 'This column contains the folders, files and hyperlinks ' +
            'contained in the current folder. To access the file, open the ' +
            'hyperlink or navigate to the subfolder, click on the item link.',
      attachTo: '.sodar-ff-header-item top',
      advanceOn: '.docs-link click',
      showCancelLink: true
    })
    if ($('.sodar-ff-link-public').length) {
      tour.addStep('item_public', {
        title: 'Public File Link',
        text: 'A public link for this file has been enabled. Through this ' +
              'link, anyone with access to the site can retrieve this file ' +
              'regardress of their {% get_display_name 'PROJECT' %} ' +
              'membership.',
        attachTo: '.sodar-ff-link-public right',
        advanceOn: '.docs-link click',
        showCancelLink: true
      })
    }
    if ($('.sodar-ff-flag-icon').length) {
      tour.addStep('item_flag', {
        title: 'Item Flag',
        text: 'An optional flag set for an item is displayed here.',
        attachTo: '.sodar-ff-flag-icon right',
        advanceOn: '.docs-link click',
        showCancelLink: true
      })
    }
    if ($('td.sodar-ff-item-dropdown').length) {
      tour.addStep('item_dropdown', {
        title: 'Item Dropdown',
        text: 'For each file, folder or hyperlink you are allowed to edit ' +
              'functions for updating and deleting the specific item can be ' +
              'found in this dropdown.',
        attachTo: '.sodar-ff-item-dropdown left',
        advanceOn: '.docs-link click',
        showCancelLink: true
      })
    }
    if ($('.sodar-ff-checkbox-item').length) {
      tour.addStep('item_select', {
        title: 'Item Selecting',
        text: 'Select files, folders and hyperlinks in this column for batch ' +
              'operations in the File Operations dropdown.',
        attachTo: '.sodar-ff-checkbox-item left',
        advanceOn: '.docs-link click',
        showCancelLink: true
      })
    }
    tour.addStep('file_ops', {
      title: 'File Operations Dropdown',
      text: 'In this dropdown you can upload files, create new folders under ' +
            'the current folder and define hyperlinks to external resources ' +
            'It also allows batch moving or deletion.',
      attachTo: '#sodar-ff-file-ops-btn left',
      advanceOn: '.docs-link click',
      showCancelLink: true
    })
  </script>
{% endblock javascript %}
