{% extends "layout_experiment.html" %}

{% block content %}
<div>
  <h1>{{ experiment.title }}</h1>

  {% if experiment.active == True %}

  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <form method="POST"
        action="{{ url_for('web_experiments.de_activate_experiment', experiment_title=experiment.title, username=experiment.author) }}">
        <button class="btn btn-warning" type="submit"><i
            class='fas fa-stop-circle mr-2'></i>{{ toggle_button }}</button>

      </form>
    </div>
    <input type="text" class="form-control" aria-describedby="basic-addon2" id="link-to-exp"
      value="{{ url_for('alfredo.start', expid=expid, _external=True) }}">
    <div class="input-group-append">
      <button class="btn btn-outline-secondary" type="button" data-clipboard-target="#link-to-exp">
        <img src="../static/clippy.svg" alt="Copy to clipboard" width="20"> Copy Link
      </button>
      <a class="btn btn-success" target="_blank" rel="noopener noreferrer"
        href="{{ url_for('alfredo.start', expid=expid) }}"><i class="fas fa-play mr-2"></i>Start</a>
    </div>
  </div>

  {% else %}

  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <form method="POST"
        action="{{ url_for('web_experiments.de_activate_experiment', experiment_title=experiment.title, username=experiment.author) }}">
        <button class="btn btn-primary" type="submit"><i
            class='fas fa-play-circle mr-2'></i>{{ toggle_button }}</button>
      </form>
    </div>
    <input type="text" class="form-control" aria-describedby="basic-addon2" id="link-to-exp" placeholder="(inactive)">
    <div class="input-group-append">
      <button class="btn btn-outline-secondary" type="button" data-clipboard-target="#link-to-exp">
        <img src="{{ url_for('static', filename='clippy.svg')}}" alt="Copy to clipboard" width="20"> Copy Link
      </button>
      <a class="btn btn-success" href="#"><i class="fas fa-play mr-2"></i>Start</a>
    </div>
  </div>

  {% endif %}

</div>

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl">

  <div class="col mb-4">
    <div class="card h-100 text-center border-primary">
      <div class="card-header border-primary">
        Complete datasets
      </div>
      <div class="card-body text-primary">
        <h1 class="card-text">{{ n["fin"] }}</h1>
      </div>
      <div class="card-footer text-muted border-primary">
        Total datasets: <span class="badge badge-light">{{ n["total"] }}</span>
      </div>
    </div>
  </div>

  <div class="col mb-4">
    <div class="card h-100 text-center border-success">
      <div class="card-header border-success">
        Last Update
      </div>
      <div class="card-body">
        <h2 class="card-text text-success">{{ experiment.last_update.strftime('%Y-%m-%d') }}</h2>
        <span class="text-muted">{{ experiment.last_update.strftime('%H:%M') }}</span>
      </div>
      <div class="card-footer text-muted border-success">
        Created on <span class="badge badge-light">{{ experiment.date_created.strftime('%Y-%m-%d, %H:%M') }}</span>
      </div>
    </div>
  </div>

  <div class="col mb-4">
    <div class="card h-100 text-center border-info">
      <div class="card-header border-info">
        Last activity
      </div>
      <div class="card-body border-info">
        <h2 class="card-text text-info">
          {% if activity["last"] != 'none' %}
          {{ activity["last"].strftime('%Y-%m-%d') }}
          {% else %}
          - none -
          {% endif %}
        </h2>
        <span class="text-muted">
          {% if activity["last"] != 'none' %}
          {{ activity["last"].strftime('%H:%M') }}
          {% else %}
          - none -
          {% endif %}
        </span>
      </div>
      <div class="card-footer text-muted border-info">
        First activity on <span class="badge badge-light">
          {% if activity["first"] != 'none' %}
          {{ activity["first"].strftime('%Y-%m-%d, %H:%M') }}
          {% else %}
          - none -
          {% endif %}
        </span>
      </div>
    </div>
  </div>

  <div class="col mb-4">
    <div class="card h-100 text-center">
      <div class="card-header">
        Current version
      </div>
      <div class="card-body">
        <h2 class="card-text"><span class="badge badge-secondary">{{ experiment.version }}</span></h2>
      </div>
    </div>
  </div>

  <div class="col mb-4">
    <div class="card h-100 text-center">
      <div class="card-header">
        Access
      </div>
      <div class="card-body">
        {% if experiment.password %}
        <h2 class="card-text"><span class="badge badge-primary">protected</span></h2>
        <span class="text-muted">{{experiment.password}}</span>
        {% else %}
        <h2 class="card-text"><span class="badge badge-success">public</span></h2>
        <span class="text-muted">No password</span>
        {% endif %}
      </div>
    </div>
  </div>

  <div class="col mb-4">
    <div class="card h-100 text-center">
      <div class="card-header">
        Script
      </div>
      <div class="card-body">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#uploadModal"><i
            class="fas fa-upload"></i> Upload Script</button>
      </div>
    </div>
  </div>

</div>


{% if experiment.description %}
<h6 class="border-bottom pt-2 mt-3"><b>Description</b></h6>

<p class="article-content">{{ experiment.description }}</p>
{% else %}
{% endif %}

<div class="alert alert-info" role="alert">
  <!-- <h3>Futurizing a script</h3> -->
  <b>When you publish research</b> conducted using Alfred, please cite. <span
    title="In this proposed citation, we use the latest alfred version number that was used for data collection in the current experiment. The doi will always link to the Zenodo repository with all versions."><i
      class="fas fa-info-circle"></i></span><br>
  Treffenstaedt, C., Wiemann, P. & Brachem, J. (2020). Alfred - A library for rapid experiment development (Version
  {{ alfred_versions[-1] }}). Göttingen, Germany: <a
    href="https://doi.org/10.5281/zenodo.1437219">https://doi.org/10.5281/zenodo.1437219</a>
</div>
Alfred versions used for data collection in this experiment:
{% for v in alfred_versions %}
<span class="badge badge-dark">{{ v }}</span>
{% endfor %}

<div class="article content-section mt-5 float-right">

  <button type="button" class="btn btn-danger ml-1 mt-2 mb-2" data-toggle="modal" data-target="#deleteModal"><i
      class='fas fa-trash mr-2'></i>Delete from Mortimer</button>

</div>

<!-- Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="deleteModalLabel">Delete Experiment</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Are you sure that you want to delete this experiment? The data stored in Mortimer will be lost! <br><br>The
        experimental data in the Alfred database will <b>not</b> be deleted by this.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <form method="POST"
          action="{{ url_for('web_experiments.delete_experiment', experiment_title=experiment.title, username=experiment.author) }}">
          <input class="btn btn-danger" type="submit" value="Delete">
        </form>
      </div>
    </div>
  </div>
</div>


<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="uploadModalLabel"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="uploadModalLabel">Upload script.py</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Here, you can upload a new script.py. Your current script.py will be replaced.</p>
      </div>
      <div class="modal-footer">
        <form method="POST"
          action="{{ url_for('web_experiments.experiment', username=experiment.author, exp_title=experiment.title) }}"
          enctype="multipart/form-data" class="needs-validation" novalidate>
          {{ form.hidden_tag() }}

          <div class="form-group">

            {{ form.script(class="form-control-file") }}
            {% if form.script.errors %}
            {% for error in form.script.errors %}
            <span class="text-danger">{{ error }}</span><br>
            {% endfor %}
            {% endif %}
          </div>

          <div class="form-group">
            {{ form.version.label(class="form-control-label") }}*
            {% if form.version.errors %}
            {{ form.version(class="form-control form-control-sm is-invalid") }}
            <!-- , placeholder=form.version.label.text -->

            <div class="invalid-feedback">
              {% for error in form.version.errors %}
              <span>{{ error }}</span>
              {% endfor %}
            </div>

            {% else %}
            {{ form.version(class="form-control form-control-sm", placeholder=experiment.version) }}
            {% endif %}
          </div>

          <small id="versionHelpBlock" class="form-text text-muted">
            Changing the version number allows you to choose, for which versions of an experiment you want to download
            data.
            If you made substantial changes to your experiment, you should change the version.
          </small>
          <div class="form-row pt-3">
            <div class="col">
              {{ form.submit(class="btn btn-primary", id="submit")}}
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>



{% endblock content %}

{% block custom_js %}
<!-- Copy to Clipboard Javascript -->
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script type="text/javascript">
  new ClipboardJS('.btn');
</script>
{% endblock %}