{% from qiita_core.qiita_settings import qiita_config %}

<link rel="stylesheet" href="{% raw qiita_config.portal_dir %}/static/vendor/css/select2.min.css" type="text/css">
<link rel="stylesheet" href="{% raw qiita_config.portal_dir %}/static/vendor/css/tagify.css" type="text/css">
<script type="text/javascript" src="{% raw qiita_config.portal_dir %}/static/vendor/js/select2.min.js"></script>
<script type="text/javascript" src="{% raw qiita_config.portal_dir %}/static/js/sharing.js"></script>
<script type="text/javascript" src="{% raw qiita_config.portal_dir %}/static/vendor/js/tagify.min.js"></script>
<script type="text/javascript" src="{% raw qiita_config.portal_dir %}/static/vendor/js/tagify.polyfills.min.js"></script>
<script type="text/javascript">
  var admin_tags = [];
  var user_tags = [];
  var available_tags = [];
  var assigned_tags = [];

  function toggle_public_raw_download() {
    if (confirm('Are you sure you want to toggle public raw download?')) {
      $.ajax({
        url: "{% raw qiita_config.portal_dir %}/study/{{study_info['study_id']}}",
        method: 'PATCH',
        dataType: 'json',
        contentType: "application/json",
        data: JSON.stringify({'op': 'replace',
                              'path': '/toggle_public_raw_download',
                              'value': null}),
        success: function(data) {
            if(data.status == 'error') {
              bootstrapAlert(data.message, "danger");
            }
            else {
              location.reload();
            }
          }
      });
    }
  }

  function update_tags(){
    $.ajax({
      type: "GET",
      url: "{% raw qiita_config.portal_dir %}/study/get_tags/",
      dataType: "json",
      async: false,
      success: function( data ) {
        admin_tags = data.tags.admin;
        user_tags = data.tags.user;
        available_tags = admin_tags.concat(user_tags);
      }
    });
    $.ajax({
      type: "GET",
      url: "{% raw qiita_config.portal_dir %}/study/tags/{{study_info['study_id']}}",
      dataType: "json",
      async: false,
      success: function( data ) {
        assigned_tags = data.tags
      }
    });
  }

  $(document).ready(function () {
    {% if editable %}
      init_sharing("{% raw qiita_config.portal_dir %}");
      update_share();
    {% end %}
    update_tags();

    var color_new = '#32CD32';
    var color_user =  '#1E90FF';
    var color_admin = '#FFA500';

    var studyTags = document.querySelector('#studyTags'),
        tagify = new Tagify (studyTags, {
          dropdown: {
            enabled: 1,            // show suggestion after 1 typed character
            fuzzySearch: false,    // match only suggestions that starts with the typed characters
          },
          whitelist: available_tags,
          transformTag: function (tagData) {
            var color = color_new;
            var tag = tagData.value;
            if (jQuery.inArray(tag, admin_tags) != -1){
              color = color_admin;
            } else if (jQuery.inArray(tag, user_tags) != -1) {
              color = color_user;
            }
            tagData.style = "--tag-text-color:" + color;
          },
        });

    tagify.addTags(assigned_tags)

    $('#toggle_public_raw_download').on('click', function() {
      $(this).prop("disabled", true);
      toggle_public_raw_download();
      $(this).prop("disabled", false);
      return false;
    });
  });

  function tags_patch() {
    var study_tags = [];
    $.each(jQuery.parseJSON(document.querySelector('#studyTags').value), function(_, element){
      study_tags.push(element.value);
    });
    $.ajax({
      url: "{% raw qiita_config.portal_dir %}/study/{{study_info['study_id']}}",
      method: 'PATCH',
      dataType: 'json',
      contentType: "application/json",
      data: JSON.stringify({'op': 'replace',
                            'path': '/tags',
                            'value': study_tags}),
      success: function(data) {
        if(data.status == 'error') {
          bootstrapAlert(data.message, "danger");
        }
        else {
          if (data.message == ''){
            bootstrapAlert("Tags updated. " + data.message, "success", 10000);
          } else {
            bootstrapAlert("Tags updated. " + data.message, "warning", 10000);
          }
          update_tags();
        }
      }
    });
  }
</script>
<p style="font-weight:bold;">Abstract</p>
<p>{{study_info['study_abstract']}}</p>
<table border="0">
  <tr>
    <td valign="top" width="400px">
      <b>Study ID:</b> {{study_info['study_id']}}<br />
      <b>Owner:</b> {{study_info['owner']}}<br />
      <b>Publications:</b> {% raw publications %}<br />
      <b>PI:</b> {% raw pi %}<br />
      <b>Lab Contact:</b> {% raw contact %}<br />
      <b>Shared With:</b> <span id="shared_html_{{study_info['study_id']}}"></span><br/>
      <b>Samples:</b> {{study_info['num_samples']}}<br />
      <b>EBI:</b> {% raw ebi_info %}<br />
      {% if editable %}
        <b>Allow Qiita users to download raw data files:</b>
        <input type="checkbox" id="toggle_public_raw_download" {% if study_info['public_raw_download'] %} checked {% end %} />
        <br />
      {% end %}
    </td>
    <td width="25px">&nbsp;</td>
    <td>
      <form method="post">
        <b>Study Tags</b>
        <br/>
        <small>
          <span style="color: #FFA500">Previously admin</span>,
          <span style="color: #1E90FF">Previously assigned</span>,
          <span style="color: #32CD32">New</span>
        </small>

        <input id="studyTags">
        <small>
          New tags are linked to the user that created them.
          Report <a href="mailto:{% raw qiita_config.help_email %}">abuse</a>.
        </small>
        <br/>
        <button type="submit" class="btn btn-default" onclick="tags_patch(); return false;">Save tags</button>
      </form>
    </td>
  </tr>
</table>

{% if study_info['ebi_submission_status'] == 'submitted' %}
  <a class="btn btn-default" href="{% raw qiita_config.portal_dir %}/download_ebi_accessions/samples/{{study_info['study_id']}}"><span class="glyphicon glyphicon-download-alt"></span> EBI sample accessions</a>
{% end %}

{% if share_access %}
<a class="btn btn-default" data-toggle="modal" data-target="#share-study-modal-view" onclick="modify_sharing({{study_info['study_id']}});"><span class="glyphicon glyphicon-share"></span> Share</a>
{% end %}
{% if editable %}
  <a class="btn btn-default" href="{% raw qiita_config.portal_dir %}/study/edit/{{study_info['study_id']}}"><span class="glyphicon glyphicon-edit"></span> Edit</a>
  <a class="btn btn-danger" href="#" data-toggle="modal" data-target="#delete-study"><span class="glyphicon glyphicon-trash"></span> Delete</a>

 <!-- Modal used to share the study -->
<div class="modal fade" id="share-study-modal-view" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modify Sharing Settings</h4>
      </div>
        <div class="modal-body">
          <div>
            <div class="form-group">
              <label for="shares-select">Add/Remove Users</label>
              <select multiple class="study" id="shares-select" data-share-url="{% raw qiita_config.portal_dir %}/study/sharing/" data-current-id={{study_info['study_id']}} style="width:50%"></select>
              <br>
              <br>
              Adding or removing email addresses automatically updates who the study is shared with.
            </div>
          </div>
        </div>
        <div class="modal-footer">
        </div>
    </div>
  </div>
</div>
{% end %}


{% comment we need to <p></p> as now we are rendering markdown %}
{% if study_info['notes'].strip() != '<p></p>' %}
  <br/><br/>
  <div style="background-color: #EFEFEF; padding: 5px 20px 20px 20px">
    <h4>Analytical Notes</h4>
    {% raw study_info['notes'].replace('\n', '<br/>') %}
  </div>
{% end %}