{% 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 %}