{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% block navbar %}
{% endblock %}

{% block content %}
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="panel panel-default">
        <form class="form-horizontal" method="post" role="form">

          {{ wtf.form_field(form.name, form_type="horizontal") }}

          {{ wtf.form_field(form.title, form_type="horizontal") }}

          {{ wtf.form_field(form.parent, form_type="horizontal") }}

          <div class="form-group">
            <label class="control-label col-lg-2" for="description">Beskrivning</label>
            <div class="col-lg-10">
              {{ form.description(rows=20, class_="form-control") }}
            </div>
          </div>

          {{ wtf.form_field(form.endpoint, form_type="horizontal") }}
          {{ wtf.form_field(form.published, form_type="horizontal") }}

          <div class="form-group">
            <label class="control-label col-lg-2" for="thumbnail">Bild</label>
            <div class="col-lg-9 thumbnail">
              {{ form.thumbnail(class_="form-control") }}
              <img src="{{url_for('thumbnail', id=form.thumbnail.data.id)}}" class="thumbnail img-responsive" id="thumbnail-display">
            </div>
          </div>

          <div id="gallery-group" class="form-group"{% if not form.endpoint.data %} style="display: none;"{%endif%}>
            <label class="control-label col-lg-2" for="photos">Galleri</label>
            <div class="col-lg-10">
              {{ form.photos }}
            </div>
          </div>

          {{ wtf.form_field(form.submit, form_type="horizontal") }}

        </form>
      </div>
    </div>
    <div class="col-md-6">
      <div class="panel panel-default">
        <div id="preview" class="panel-body">
      {{ page.description | markdown }}
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
{{super()}}
  <script>
$('#endpoint').change(function() {
  var gallery_group = $('#gallery-group');
  if(this.checked){
    gallery_group.show();
  } else {
    gallery_group.hide();
  }
});
$('#description').change(function() {
  $.post("/admin/markdown", {md: $('#description').val()}).done(function(data) {
    $('#preview').html(data);
  });
});
$('#thumbnail').change(function() {
  $('#thumbnail-display').attr('src', '/thumbnail/'+$(this).val());
});
  </script>
{% endblock %}