{% from qiita_core.qiita_settings import qiita_config %}
<script type="text/javascript">
  function formatSummaryJobHTML(jobId, jobStatus, jobStep){
    var htmlContents = '<label>The summary is currently being generated by job ' + jobId + '.</label> Status: ' + jobStatus + '.';
    if (jobStep !== null && jobStep !== undefined) {
      htmlContents += 'Step: ' + jobStatus + '.';
    }
    return htmlContents;
  };

  /*
   * Function to generate the artifact HTML summary
   *
   * @param artifact_id int the artifact id
   *
   * This function executes an AJAX query to fire off the generation of the
   * artifact's HTML summary
   *
   */
  function generate_html_summary(artifact_id) {
    $.post('{% raw qiita_config.portal_dir %}/artifact/' + artifact_id + '/summary/', function(data) {
      var htmlContents = formatSummaryJobHTML(data.job[0], data.job[1], data.job[2]);
      $("#artifact-summary-content").html(htmlContents);
    })
      .fail(function(object, status, error_msg) {
        bootstrapAlert("Error launching summary job: " + status +object.statusText.replace("\n", "<br/>"), "danger");
      });
  };

  /*
   * Function to change the visibility of an artifact
   *
   * @param visibility str the new visibility
   * @param aid int the artifact id
   *
   * The function executes an AJAX query to update the visibility of the
   * artifact
   *
   */
  function set_artifact_visibility(visibility, aid) {
    $.ajax({
      url: '{% raw qiita_config.portal_dir %}/artifact/' + aid + '/',
      type: 'PATCH',
      data: {'op': 'replace', 'path': '/visibility/', 'value': visibility},
      success: function(data) {
        // Reload the artifact summary page so we can update the buttons
        processingNetwork.$refs.procGraph.populateContentArtifact(aid);
      },
      error: function(object, status, error_msg) {
        // Something went wrong, show the message
        var message = "Error changing artifact visibility: ";
        var level = "danger";

        if (error_msg.includes("Couldn't send email to admins")) {
          message = "";
          level = "warning";
        } else if (error_msg.includes("Errors in your info files:")) {
          message = "";
        }
        message = message + error_msg;
        bootstrapAlert(message, level);
      }
    });
  }

  /**
   *
   * This function is called when the artifact name is successfully changed.
   *
   * @param: data. Ignored
   */
  function name_changed(data) {
    // Hide the modal to change the artifact name
    $("#update-artifact-name").modal('hide');
    // Update the name of the artifact in the GUI
    $("#summary-title").text($('#new-artifact-name').val());
    // Reset the value in the modal to an empty string
    $('#new-artifact-name').val("");
    // Reload the artifact/jobs graph so the new name is shown in it
    processingNetwork.$refs.procGraph.updateGraph();
  }

  /**
   *
   * Allows updating the artifact name if the new artifact name is not empty
   *
   */
  function validate_new_name() {
    $("#update-name-btn").prop('disabled', $("#new-artifact-name").val() === "");
  }

  $(document).ready(function() {
    // Set the focus on the text input when the modal to change the artifact
    // name is shown
    $('#update-artifact-name').on('shown.bs.modal', function() {
      $('#new-artifact-name').val($("#summary-title").text());
      $('#new-artifact-name').focus();
      $('#new-artifact-name').select();
    });

    $('#process-btn').on('click', function(){
      processingNetwork.$refs.procGraph.loadArtifactType({{artifact_id}});
    });

    qiita_websocket.init(window.location.host + '{% raw qiita_config.portal_dir %}/study/list/socket/', error, error);
    qiita_websocket.add_callback('sel', show_alert);

    // Doing this in JavaScript to avoid code duplication
    {% if summary is not None %}
      var htmlContents =  '<br/><a class="btn btn-info btn-sm" href="/artifact/html_summary/{{summary}}" target="_blank">Open summary in a new window</a>' +
                           '<br/><iframe width="100%" height="900" src="/artifact/html_summary/{{summary}}" frameBorder=0></iframe>';
    {% elif job is not None %}
      var htmlContents = formatSummaryJobHTML('{{ job[0] }}', '{{ job[1] }}', '{{ job[2] }}');
    {% else %}
      var htmlContents = '<label>Currently, no summary exists.</label> </br>' +
                         '<button class="btn btn-info btn-sm" onclick="generate_html_summary({{artifact_id}});">Generate summary</button></br>';
    {% end %}
    $("#artifact-summary-content").html(htmlContents);
  });
</script>
<div class='row'>
  <div class='col-md-12'>
    <h4>
      {% if processing_info %}
        {% if processing_info['software_deprecated'] %}
          <div class="alert alert-danger" role="alert">
            Danger, the software that generated this artifact was produced by a software version with a known bug and the results are wrong, please re-run with the newer version.
            {% raw processing_info['software_description'] %}
          </div>
        {% elif not processing_info['command_active'] %}
          <div class="alert alert-warning" role="alert">
            Warning, a newer version of the software that generated this artifact is available, which may or may not change results.
          </div>
        {% end %}
      {% end %}
      <i id='summary-title'>{{name}}</i><i> (ID: {{artifact_id}}) Visibility: {{visibility}}</i>

      {% if being_deleted %}
        <h4 style="color: #FF2222;">This artifact is being deleted</h4>
      {% else %}
        {% if editable %}
          <a class="btn btn-default btn-sm" data-toggle="modal" data-target="#update-artifact-name"><span class="glyphicon glyphicon-pencil"></span> Edit name</a>
        {% end %}

        {% if artifact_type == 'BIOM' and not is_from_analysis %}
          <input type="button" class="btn btn-default btn-sm" value="Add to Analysis" onclick="send_samples_to_analysis(this, [{{artifact_id}}]);">
          <a class="btn btn-default btn-sm" id="process-btn"><span class="glyphicon glyphicon-play"></span> Process</a>
        {% elif artifact_type != 'job-output-folder' %}
          <a class="btn btn-default btn-sm" id="process-btn"><span class="glyphicon glyphicon-play"></span> Process</a>
        {% end %}

        {% if editable %}
          <a class="btn btn-danger btn-sm" onclick="if (confirm('Are you sure you want to delete artifact {{artifact_id}}?')){ processingNetwork.$refs.procGraph.deleteArtifact({{artifact_id}}) };"><span class="glyphicon glyphicon-trash"></span> Delete</a>
          {% raw buttons %}
        {% end %}

        {% if processing_info %}
          <button class="btn btn-default btn-sm" data-toggle="collapse" data-target="#processing-info"><span class="glyphicon glyphicon-eye-open"></span> Show processing information</a>
        {% end %}
      {% end %}
    </h4>
    {% if processing_info %}
      <div id="processing-info" class="collapse" style="padding: 10px 10px 10px 10px; border-radius: 10px; background: #EEE;">
        <div class="row form-group">
          <label class="col-sm-1 col-form-label">Command:</label>
          <div class="col-sm-5">{% raw processing_info['command'] %} ({% raw processing_info['software'] %} {% raw processing_info['software_version'] %})</div>
        </div>
        <div class="row form-group">
          <label class="col-sm-1 col-form-label">Generated on:</label>
          <div class="col-sm-5">{{artifact_timestamp}}</div>
        </div>
        <div class="row form-group">
          <label class="col-sm-1 col-form-label">Parameters:</label>
        </div>
        {% for key in processing_info['processing_parameters'] %}
          <div class="row form-group">
            <div class="col-sm-1"></div>
            <label class="col-sm-2 col-form-label">{% raw key %}:</label>
            <div class="col-sm-5">{% raw processing_info['processing_parameters'][key] %}</div>
          </div>
        {% end %}
      </div>
    {% end %}
  </div>
</div>

{% if files and artifact_type != 'job-output-folder' %}
<div class='row'>
  <div class='col-md-12'>
    <b>Available files:</b>
    <button class="btn btn-default" data-toggle="collapse" data-target="#available-files-div">
      <span class="glyphicon glyphicon-eye-open"></span>
      Show/Hide
    </button>
    <div id="available-files-div" class="collapse {% if len(files) <= 10 %} in {% end %}" style="padding: 10px 10px 10px 10px; border-radius: 10px; background: #EEE;">
      {% for f_id, f_name, cs, f_size in files %}
        <a class="btn btn-default" href="{% raw qiita_config.portal_dir %}/download/{{f_id}}"><span class="glyphicon glyphicon-download-alt"></span> {{f_name}}</a> (CRC32: {{format(int(cs), '08x')}}) {{f_size}}
        </br>
      {% end %}
    </div>
  </div>
</div>
{% end %}

<div class='row'>
  <div class='col-md-12' id='artifact-summary-content'>
  </div>
</div>

<!-- Modal to update the artifact name -->
<div class="modal fade update-artifact-name" tabindex="-1" role="dialog" id="update-artifact-name">
  <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>Updating artifact {{artifact_id}} name</h3>
      </div>
      <div class="modal-body">
        Introduce the new name:<br/>
        <input type="text" name="new-artifact-name" id="new-artifact-name" size="35" maxlength="35" onkeyup="validate_new_name();">
        <button id="update-name-btn" class="btn btn-default" onclick="change_artifact_name('{% raw qiita_config.portal_dir %}', {{artifact_id}}, $('#new-artifact-name').val(), name_changed);" disabled>Update</button>
      </div>
      <div class="modal-footer">
      </div>
    </div>
  </div>
</div>