{% extends "base.html" %}
{% load static %}
{% load customtags %}

{% block head %}
{% include 'head_content.html' with title="LyProX · Download CSV" %}
{% endblock head %}

{% block content %}

<section class="section">
  <div class="container">
    <div class="columns is-centered">
      <div class="column is-6">
        <div class="box">
          <div class="block content">
            <h1 class="title">Datasets</h1>
            <p>
              Below we list the datasets that have been uploaded to LyProX.
              You can download the datasets as CSV files using the
              <span class="tag icon-text is-success px-2">
                <span class="icon pr-1">
                  <i class="fas fa-download"></i>
                </span>
                download
              </span>
              button or view the data description by following the
              <span class="tag icon-text is-info px-2">
                <span class="icon pr-1">
                  <i class="fas fa-info-circle"></i>
                </span>
                info
              </span>
              button.
            </p>
          </div>

          {% for dataset in dataset_list %}
          <div class="notification">
            <div class="media">
              <div class="media-left">
                <figure class="block image is-48x48 is-flex is-align-items-center">
                  <img src="{{ dataset.institution.logo.url }}" alt="institution logo">
                </figure>
              </div>
              <div class="media-content">
                <div class="content">
                  <p class="mb-1">
                    <span class="icon-text">
                      <span class="icon">
                        <i class="fas fa-map-marker-alt"></i>
                      </span>
                      <span>{{ dataset.institution.name }}, {{ dataset.institution.city }},
                        {{ dataset.institution.country }}</span>
                    </span>
                  </p>
                  <p class="mb-1">
                    <span class="icon-text">
                      <span class="icon">
                        <i class="fas fa-calendar-alt"></i>
                      </span>
                      <span>{{ dataset.date_created }}&nbsp;</span>
                      {% if dataset.is_outdated %}
                      <span class="has-text-danger">(outdated)</span>
                      {% else %}
                      <span class="has-text-success">(up to date)</span>
                      {% endif %}
                    </span>
                  </p>
                  <p class="mb-1">
                    <span class="icon-text">
                      <span class="icon">
                        <i class="fas fa-hashtag"></i>
                      </span>
                      <span>{{ dataset.patient_count }} patients in dataset</span>
                    </span>
                  </p>
                  <p class="mb-1">
                    <span class="icon-text">
                      {% if dataset.is_locked %}
                      <span class="icon">
                        <i class="fas fa-lock"></i>
                      </span>
                      <span>Locked, cannot be edited</span>
                      {% else %}
                      <span class="icon">
                        <i class="fas fa-lock-open"></i>
                      </span>
                      <span>Editable</span>
                      {% endif %}
                    </span>
                  </p>
                  <p class="mb-1">
                    <span class="icon-text">
                      {% if dataset.is_public %}
                      <span class="icon">
                        <i class="fas fa-eye"></i>
                      </span>
                      <span>Publicly available</span>
                      {% else %}
                      <span class="icon">
                        <i class="fas fa-eye-slash"></i>
                      </span>
                      <span>Only visible to logged-in users</span>
                      {% endif %}
                    </span>
                  </p>
                </div>
                <div class="level">
                  <div class="level-left">
                    <div class="level-item">
                      <div class="tags">
                        <a href="{{ dataset.data_url }}"
                          class="button tag is-success has-addons tooltip" id="export"
                          data-tooltip="Export dataset from database to CSV">
                          <span class="icon is-small"><i class="fas fa-download"></i></span>
                          <span>Download</span>
                        </a>
                        <a href="{% url 'patients:dataset_view' pk=dataset.pk %}"
                          class="button tag is-info has-addons tooltip"
                          data-tooltip="Display the dataset's description">
                          <span class="icon is-small"><i class="fas fa-info-circle"></i></span>
                          <span>Readme</span>
                        </a>
                        {% if not dataset.is_locked %}
                        <a href="{% url 'patients:dataset_delete' pk=dataset.pk %}"
                          class="button tag is-danger has-addons tooltip"
                          data-tooltip="Delete the dataset">
                          <span class="icon is-small"><i class="fas fa-trash-alt"></i></span>
                          <span>Delete</span>
                        {% endif %}
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          {% endfor %}

          <div class="block">
            <p class="title is-5 mb-2">Upload new dataset</p>
            <p>
              Create a new dataset by uploading a cohort of patients as a
              CSV file. You can download one of the existing datasets'
              CSV files as a template or read the data description below
              to understand the required format.
            </p>
            <div class="level mt-3">
              <div class="level-left"></div>
              <div class="level-right">
                <div class="level-item">
                  <a href="{% url 'patients:dataset_upload' %}" class="button is-warning">
                    <span class="icon-text">
                      <span class="icon">
                        <i class="fas fa-plus"></i>
                      </span>
                      <span>Upload new</span>
                    </span>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

{% endblock content %}