{% extends "layouts/content.html" %}
{% load i18n %}
{% load keep_spacing %}
{% load django_tables2 %}
{% load results_accessibility_tags %}

{% block styles %}
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}lava_results_app/css/chart.css"/>
{% endblock %}

{% block content %}

<h1>Chart {{ chart.name }} <small><a href="{% url 'lava.results.chart_display' chart.name %}" class="btn btn-xs btn-info"><span class="glyphicon glyphicon-th-list"></span> Display</a></small></h1>

<div class="row">
  <div class="col-md-6">
    <h4 class="modal-header">Summary</h4>

    <dl class="dl-horizontal">

    <dt>Status</dt>
    <dd>
      {% if chart.is_published %}
      Published
      {% else %}
      Unpublished
      {% endif %}
    </dd>

    {% if chart.is_published %}
    <dt>Chart Group label</dt>
    <dd>
      <a href="#" data-toggle="modal" data-target="#chart_group_modal">
	<div style="float: left;">{{ chart.chart_group|default:"Click here to select"}}</div>
      </a>

      {% if chart.chart_group %}
      <div id="group_link" class="group-link">
	<a href="{% url 'lava.results.chart_list' %}#{{ chart.chart_group|iriencode }}">Group link</a>
      </div>
      {% else %}
      <div id="group_link" class="group-link" style="display: none;">
	<a href="{% url 'lava.results.chart_list' %}#">Group link</a>
      </div>
      {% endif %}
      &nbsp;&nbsp;
      <button class="btn btn-info btn-xs" data-toggle="tooltip" data-placement="right" title="Collect similar reports into a single table on the image reports list.">?</button>

    </dd>
    <dt>Maintainer</dt>
    <dd>
      {{ chart.owner }}&nbsp;&nbsp;
      <button class="btn btn-info btn-xs" data-toggle="tooltip" data-placement="right" title="User who created the chart.">?</button>
    </dd>

    <dt>Group edit permission</dt>
    <dd>
      <a href="#" data-toggle="modal" data-target="#chart_permission_modal">
	<div style="float: left;">{{ chart.group|default:"Click here to select"}}</div>
      </a>
      &nbsp;&nbsp;
      <button class="btn btn-info btn-xs" data-toggle="tooltip" data-placement="right" title="A group of users already listed on the Profile page.">?</button>
      <div style="clear: both;"></div>
    </dd>
    {% endif %}
    <dt>Description</dt>
    <dd>
    {{ chart.description|keep_spacing|linebreaks }}
    </dd>
    </dl>
  </div>

  <div class="col-md-6">
    <h4 class="modal-header">Actions</h4>
    <div class="btn-group btn-group-justified">
      {% if chart|check_chart_access:request.user %}
      <div class="btn-group">
        <a href="{{ chart.get_absolute_url }}/+edit" class="btn btn-info"><span class="glyphicon glyphicon-pencil"></span> Edit</a>
      </div>
      <div class="btn-group">
        <a href="{{ chart.get_absolute_url }}/+delete" class="btn btn-danger" data-toggle="confirm" data-title="Are you sure you want to delete this Chart?"><span class="glyphicon glyphicon-trash"></span> Delete</a>
      </div>
      <div class="btn-group">
        <a href="{{ chart.get_absolute_url }}/+toggle-published" class="btn btn-default"><span class="glyphicon glyphicon-share"></span>
	  {% if chart.is_published %}
	  Unpublish
	  {% else %}
	  Publish
	  {% endif %}
	</a>
      </div>
      {% endif %}
    </div>
  </div>
</div>

<h3>Queries</h3>

<div class="fields-container">
  <a href="{% url 'lava.results.chart_query_add' chart.name %}">
    Add query
  </a>
</div>

<div class="list-container" id="queries">
  {% for chart_query in chart.chartquery_set.all %}
  <div id="{{ chart_query.id }}" class="sort">
    <div class="chart-title">
      <a href="{{ chart_query.query.get_absolute_url }}">{{ chart_query.query.owner_name }}</a>
      <a class="chart-title-link" href="{% url 'lava.results.chart_query_remove' chart.name chart_query.id %}" data-toggle="confirm" data-title="Are you sure you want to remove query from this chart?">
        remove
      </a>
      <a class="chart-title-link" href="{{ chart_query.get_absolute_url }}">
        edit
      </a>
    </div>
    <div>
      Last updated: {% if chart_query.query.is_live %} Live query{% else %}{{ chart_query.query.last_updated | default:"Never" }}{% endif %}
    </div>
    <div>
      Type: {{ chart_query.chart_type }}
    </div>
    <div>
      Height: {{ chart_query.chart_height }}
    </div>
    <div>
      Visibility: {{ chart_query.chart_visibility }}
    </div>
    <div>
      Representation: {{ chart_query.representation }}
    </div>
    <div>
      X-axis attribute: {{ chart_query.xaxis_attribute }}
    </div>
  </div>

  {% empty %}
  <div>
    <li>No queries added yet.</li>
  </div>
  {% endfor %}
</div>

<div id="chart_group_modal" class="modal fade">
  <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">Chart group update</h4>
      </div>
      <form class="well" id="chart_group_form" method="post" action="{% url 'chart_add_group' name=chart.name %}">
        <div class="modal-body">
	  {% csrf_token %}
          <div class="help-text">Type to search for the group label.<br>Available group labels will appear in a list below.<br>Alternatively you can type in a new one.
          </div>
          <div style="display: inline;">
            <label for="chart_group">Chart Group label:</label>
          </div>
          <div class="typeahead__container">
            <div class="typeahead__field">
              <div class="typeahead__query">
                <input id="chart_group" name="value" type="search" placeholder="Search" autocomplete="off" value="{{ chart.chart_group|default:'' }}" />
              </div>
            </div>
          </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Save</button>
      </div>
      </form>
    </div>
  </div>
</div>

<!-- Modal HTML -->
<div id="chart_permission_modal" class="modal fade">
  <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">Group permission update</h4>
      </div>
      <form class="well" id="group_permission_form" method="post" action="{% url 'chart_select_group' name=chart.name %}">
        <div class="modal-body">
	  {% csrf_token %}
          <div class="help-text">Type to search for the system group.<br>Available groups will appear in a list below.
          </div>
          <div style="display: inline;">
            <label for="group_permission">Group edit permission:</label>
          </div>
          <div class="typeahead__container">
            <div class="typeahead__field">
              <div class="typeahead__query">
                <input id="group_permission" name="value" type="search" placeholder="Search" autocomplete="off" value="{{ chart.group|default:'' }}" />
              </div>
            </div>
          </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Save</button>
      </div>
      </form>
    </div>
  </div>
</div>

{% endblock %}

{% block scripts %}
<script type="text/javascript" src="{{ STATIC_URL }}lava_server/js/jquery.typeahead.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}lava_results_app/js/sortable.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}lava_server/js/bootbox.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}lava_results_app/js/bootbox.data.toggle.min.js"></script>
<script>

  $("#queries").on("mouseup", function(event, ui) {
    var chart_query_order = [];
    $("#queries").children().each(function () {
      chart_query_order.push($(this).attr("id"));
    });

    $.ajax({
      url: "{% url 'chart_query_order_update' name=chart.name %}",
      type: "POST",
      data: {
        csrfmiddlewaretoken: '{{csrf_token}}',
        chart_query_order: chart_query_order.join(),
      },
    });
  });

  $(document).ready(function () {
    add_bootbox_data_toggle();
  });
</script>
{% if chart.is_published %}
<script>
  $("#chart_group_modal").on('show.bs.modal', function (e) {
    $("#chart_group").val("{{ chart.chart_group|default:'' }}");
    $("#chart_group").typeahead({
        source: {chartgroups: {ajax: {type:"GET", url: '{% url 'chart_group_list' %}', data: {term: $(this).val()}}}},
        minLength: 1,
    });
  });

  $("#chart_permission_modal").on('show.bs.modal', function (e) {
    $("#group_permission").val("{{ chart.group|default:'' }}");
    $("#group_permission").typeahead({
        source: {groups: {ajax: {type:"GET", url: '{% url 'get_chart_group_names' %}', data: {term: $(this).val()}}}},
        display: ["name"],
        minLength: 1,
    });
  });

</script>
{% endif %}

{% endblock %}
