{% extends "webui/entities/base.html" %}
{% load webui_tags %}

{% block title %}Edit | {{ entity.title }}{% endblock %}

{% block breadcrumbs %}{{ block.super }}
{% breadcrumbs entity "Edit" %}
{% endblock breadcrumbs %}


{% block content %}

  <div class="row-fluid">
    <div class="span12">


<h2>
{{ entity.id }}
</h2>
<h1>
Edit
</h1>


{% if form.errors %}
<div class="callout callout-danger">
  <h4>
    <span class="glyphicon glyphicon-exclamation-sign"></span>
    Form contains errors &mdash; see below
  </h4>
</div><!-- .callout -->
{% endif %}


<form name="edit" action="" method="POST">{% csrf_token %}
<table>
  <tr>
    <th><label>Collection:</label></th>
    <td>{{ collection.id }}: {% if collection.title %}{{ collection.title }}{% endif %}</td>
  </tr>
  <tr>
    <th><label>Object ID:</label></th>
    <td>{{ entity.id }}</td>
  </tr>
  {{ form.as_table }}
  <tr>
    <th></th>
    <td><button name="submit" type="submit" value="Save" class="btn btn-mini btn-primary">Save</button></td>
  </tr>
</table>
</form>


{% if form.tracebacks %}
<div class="callout callout-danger">
  <h4>
    <span class="glyphicon glyphicon-exclamation-sign"></span>
    Form field error tracebacks
  </h4>
  <table class="table">
    {% for fieldname,traceback in form.tracebacks.iteritems %}
    <tr>
      <th><label>
          {{ fieldname }}
      </label></th>
      <td class="text-muted">
        {{ traceback|safe|linebreaks }}
      </td>
    </tr>
    {% endfor %}
  </table>
</div><!-- .callout -->
{% endif %}


{% if entity.model_def_fields_removed %}
  <div class="text-danger bg-danger">
    {{ entity.model_def_fields_removed_msg }}
  </div>
{% endif %}
{% if entity.model_def_fields_added %}
  <div class="text-info bg-info">
    {{ entity.model_def_fields_added_msg }}
  </div>
{% endif %}
{% if entity.model_def_commits_msg %}
  <div class="text-{{ entity.model_def_commits_alert }} bg-{{ entity.model_def_commits_alert }}">
    {{ entity.model_def_commits_msg }}
  </div>
{% endif %}


    </div><!-- .span12 -->
  </div><!-- .row-fluid -->

{% endblock content %}


{% block pagecss %}

<link rel="stylesheet" href="{{ STATIC_URL }}js/tagmanager/tagmanager.css">
<style>
.tt-dropdown-menu, .gist {
  text-align: left;
}
.typeahead, .tt-query, .tt-hint {
  width: 396px;
  height: 30px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 30px;
  border: 2px solid #ccc;
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  outline: none;
}
.typeahead {
  background-color: #fff;
}
.typeahead:focus {
  border: 2px solid #0097cf;
}
.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.tt-hint {
  color: #999
  background:none!important;
  display:none!important;
}
.tt-dropdown-menu {
  width: 396px;
  margin-top: 3px;
  padding: 3px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
.tt-suggestion {
  padding: 3px 20px;
}
.tt-suggestion.tt-cursor {
  color: #fff;
  background-color: #0097cf;

}
.tt-suggestion p {
  margin: 0;
}
.gist {
  font-size: 14px;
}
.tt-dropdown-menu {  /* #scrollable-dropdown-menu .tt-dropdown-menu */
  max-height: 200px;
  overflow-y: auto;
}
</style>
{% endblock pagecss %}


{% block javascript %}
<script type="text/javascript" src="{{ STATIC_URL }}js/typeahead/dist/typeahead.jquery.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/tagmanager/tagmanager.js"></script>


<script>

  var topics_terms = [{% for term in topics_terms %}
    "{{ term|safe|addslashes }}",{% endfor %}
  ];
  var facility_terms = [{% for term in facility_terms %}
    "{{ term|safe|addslashes }}",{% endfor %}
  ];

  var topics_terms_v = topics_terms.slice(0);
  var facility_terms_v = facility_terms.slice(0);

  /* Write URLs to topics and facility helptext links. */
  $("#vocab-topics-list").attr({
    href: "{% url "webui-entity-vocab-terms" "topics" %}",
    target: "_blank"
  });
  $("#vocab-facility-list").attr({
    href: "{% url "webui-entity-vocab-terms" "facility" %}",
    target: "_blank"
  });

  /* Add classes to #id_topics so tagsManager and typeahead can work. */
  $("#id_topics").attr({
    class: "input-medium tm-input typeahead tt-suggestion",
    autocomplete: "off",
    placeholder: "Topics"
  });
  $("#id_facility").attr({
    class: "input-medium tm-input typeahead tt-suggestion",
    autocomplete: "off",
    placeholder: "Facility"
  });

  var tagApi_t = jQuery("#id_topics").tagsManager({
    delimiters: [9,13],
    replace: true,  /* puts data in "hidden-topics" field */
    backspace: [],  /* don't let backspace remove tags */
    prefilled: {{ topics_prefilled|safe }},
    onlyTagList: true,
    tagList: topics_terms_v
  });
  var tagApi_f = jQuery("#id_facility").tagsManager({
    delimiters: [9,13], 
    replace: true,  /* puts data in "hidden-facility" field */
    backspace: [],  /* don't let backspace remove tags */
    prefilled: {{ facility_prefilled|safe }}, 
    onlyTagList: true,
    tagList: facility_terms_v
  });

  var substringMatcher = function(strs) {
    return function findMatches(q, cb) {
      var matches, substringRegex;
      // an array that will be populated with substring matches
      matches = [];
      // regex used to determine if a string contains the substring `q`
      substrRegex = new RegExp(q, 'i');
      // iterate through the pool of strings and for any string that
      // contains the substring `q`, add it to the `matches` array
      $.each(strs, function(i, str) {
        if (substrRegex.test(str)) {
          // the typeahead jQuery plugin expects suggestions to a
          // JavaScript object, refer to typeahead docs for more info
          matches.push({ value: str });
        }
      });
      cb(matches);
    };
  };

  $('#id_topics').typeahead(
    { minLength:2, highlight:true },
    { name:'topics_terms', displayKey:'value', source:substringMatcher(topics_terms)}
  ).on('typeahead:selected', function (e, d) {
    tagApi_t.tagsManager("pushTag", d.value);
  });
  $('#id_facility').typeahead(
    { minLength:2, highlight:true },
    { name:'facility_terms', displayKey:'value', source:substringMatcher(facility_terms)}
  ).on('typeahead:selected', function (e, d) {
    tagApi_f.tagsManager("pushTag", d.value);
  });

</script>
{% endblock javascript %}