{% extends sitebase.html %}

{% block head %}

{% set study_title = study_info['study_title'] %}

{% set study_title_msg = study_title.replace('"', '\\"') %}

<script type="text/javascript">

  function validate_delete_study_text() {

    if ($("#study-alias").val() == "{% raw study_title_msg %}") {

      $('#delete-study-button').prop('disabled', false);

    } else {

      $('#delete-study-button').prop('disabled', true);

    }

  }

  function delete_study() {

    if($("#study-alias").val() != "{% raw study_title_msg %}") {

      alert("The entered study alias doesn't match the study");

      return false;

    }

    else if(confirm("Are you sure you want to delete {% raw study_title_msg %}?")) {

      $.post('{% raw qiita_config.portal_dir %}/study/delete/', { study_id: {{study_info['study_id']}} })

        .done(function ( data ) {

          location.reload();

        });

    }

  }

  /**

   *

   * Function to populate the main div of the screen

   *

   * @param url string with the URL to perform the AJAX get call

   * @param parameters the parameters for the AJAX call

   *

   * This function executes an AJAX get against the URL provided with the given

   * parameters, and inserts the returned data as HTML in the study-main div

   *

   */

  function populate_main_div(url, parameters) {

    show_loading("study-main");

    $.get(url, parameters)

      .done(function(data) {

          $("#study-main").html(data);

      });

  }

  /**

   *

   * Function to populate the data-types-menu div

   *

   * This function executes an AJAX get against the URL

   * "/study/description/data_type_menu/" and inserts the returned data as

   * HTML in the data-types-menu div

   *

   */

  function populate_data_type_menu_div() {

    show_loading("data-types-menu");

    $.get("{% raw qiita_config.portal_dir %}/study/description/data_type_menu/", {study_id: {{study_info['study_id']}} })

      .done(function(data) {

        $("#data-types-menu").html(data);

      });

  }

  $(document).ready(function() {

    // Populate the different sections of the page

    populate_data_type_menu_div();

    // The initial page to be shown is the base information of the study

    {% if 'prep_id' in study_info %}

        populate_main_div("{% raw qiita_config.portal_dir %}/study/description/prep_template/", { prep_id: {{study_info['prep_id']}}, study_id: {{study_info['study_id']}}});

    {% else %}

        populate_main_div("{% raw qiita_config.portal_dir %}/study/description/baseinfo/", { study_id: {{study_info['study_id']}}});

    {% end %}

    {% if study_info['num_samples'] > 0 %}

      $("#sample-summary-btn").show();

      $("#add-new-preparation-btn").show();

    {% else %}

      $("#sample-summary-btn").hide();

      $("#add-new-preparation-btn").hide();

    {% end %}

    {% if study_info['message'] != '' %}

      bootstrapAlert("{{study_info['message']}}", "{{study_info['level']}}");

    {% end %}

  });

</script>

<style>

.graph {

  width:100%;

  height:300px;

  border: 1px solid #ccc;

}

</style>

{% end %}

{% block content %}

<div class="row">

  {% if study_info['level'] != 'info' %}

    <div class="col-md-3">

      <button class="btn btn-default btn-block" onclick="populate_main_div('{% raw qiita_config.portal_dir %}/study/description/baseinfo/', { study_id: {{study_info['study_id']}} })"><span class="glyphicon glyphicon-info-sign"></span> Study Information</button>

      <button class="btn btn-default btn-block" onclick="populate_main_div('{% raw qiita_config.portal_dir %}/study/description/sample_template/', { study_id: {{study_info['study_id']}} })"><span class="glyphicon glyphicon-info-sign"></span> Sample Information</button>

      {% if editable %}

        <a class="btn btn-default btn-block" href="{% raw qiita_config.portal_dir %}/study/upload/{{study_info['study_id']}}"><span class="glyphicon glyphicon-upload"></span> Upload Files</a>

        <button class="btn btn-default btn-block" onclick="populate_main_div('{% raw qiita_config.portal_dir %}/study/new_prep_template/', { study_id: {{study_info['study_id']}} })" id="add-new-preparation-btn"><span class="glyphicon glyphicon-plus-sign"></span> Add New Preparation</button>

        <button class="btn btn-default btn-block" onclick="populate_main_div('{% raw qiita_config.portal_dir %}/study/analyses/', { study_id: {{study_info['study_id']}} })" id="analyses-btn"><span class="glyphicon glyphicon-info-sign"></span> Derived Analyses </button>

      {% end %}

      {% if study_info['show_biom_download_button'] %}

        <a class="btn btn-default btn-block" href="{% raw qiita_config.portal_dir %}/download_study_bioms/{{study_info['study_id']}}"><span class="glyphicon glyphicon-download-alt"></span> All QIIME maps and BIOMs</a>

      {% end %}

      {% if study_info['has_access_to_raw_data'] and study_info['show_raw_download_button'] %}

        <a class="btn btn-default btn-block" href="{% raw qiita_config.portal_dir %}/download_raw_data/{{study_info['study_id']}}"><span class="glyphicon glyphicon-download-alt"></span> All raw data</a>

      {% end %}

      <div style="text-align: center;"><small><a href="{% raw qiita_config.portal_dir %}/static/doc/html/faq.html#how-to-solve-download-or-unzip-errors">Issues with downloads or opening the downloaded zip?</a></small></div>

      <div id="data-types-menu"></div>

    </div>

  {% end %}

  <div class="col-md-9">

    <!-- Study ID and study alias always on top -->

    <div class="row">

      <div class="col-md-12" id="study-base-info">

        <h2>{% raw study_title %} - ID {{study_info['study_id']}}</h2>

        <h3>{{study_info['study_alias']}}</h3>

        <h6>Do you want to submit to <a target="_blank" href="https://www.ebi.ac.uk/ena">EBI-ENA</a>? Review the <a target="_blank" href="{% raw qiita_config.portal_dir %}/static/doc/html/checklist-for-ebi-ena-submission.html">submission checklist</a></h6>

      </div>

    </div>

    <!-- Dynamic div that changes based on what information is shown -->

    <div class="row"><div class="col-md-12" id="study-main"></div></div>

  </div>

</div>

<!-- Modal used to delete the study -->

<div class="modal fade delete-study" tabindex="-1" role="dialog" id="delete-study">

  <div class="modal-dialog modal-md">

    <div class="modal-content">

      <div class="modal-header">

        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

        <h3>Deleting:<br/></h3><h4>{% raw study_title %}</h4>

      </div>

      <div class="modal-body">

        You will only be able to delete a sandboxed study. This will delete all data associated with the study, including analyses using this data.<br/>

        To continue you need to write the title of the study:<br/>

        <input type="text" name="study-alias" id="study-alias" onkeyup="validate_delete_study_text();" size="{{ len(study_title) }}">

        <button class="btn btn-danger glyphicon glyphicon-trash" onclick="delete_study();" id="delete-study-button" disabled></button>

      </div>

      <div class="modal-footer">

      </div>

    </div>

  </div>

</div>

{% end %}