{% extends "base.html" %}
{% block navbar %}
{% endblock %}
{% block styles %}
{{ super() }}
<style>
.just-padding {
  padding: 15px;
}
.list-group.list-group-root {
  padding: 0;
  overflow: hidden;
}
.list-group.list-group-root .list-group {
  margin-bottom: 0;
}
.list-group.list-group-root .list-group-item {
  border-radius: 0;
  border-width: 1px 0 0 0;
}
.list-group.list-group-root > .list-group-item:first-child {
  border-top-width: 0;
}
.list-group.list-group-root > .list-group > .list-group-item {
  padding-left: 30px;
}
.list-group.list-group-root > .list-group > .list-group > .list-group-item {
  padding-left: 45px;
}
.list-group.list-group-root > .list-group > .list-group > .list-group > .list-group-item {
  padding-left: 60px;
}
.list-group.list-group-root > .list-group > .list-group > .list-group > .list-group > .list-group-item {
  padding-left: 75px;
}

</style>
{% endblock %}

{% macro delete_button(type, title, id) -%}
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deletemodal" data-type="{{type}}" data-id="{{id}}" data-title="{{title}}"><span class="glyphicon glyphicon-remove"></button>
{%- endmacro %}

{% block content %}
<div class="modal fade" id="deletemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><!-- Delete modal -->
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4>Är du säker?</h4>
      </div>
      <div class="modal-body">
        <p>Vill du verkligen ta bort sidan?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Nej</button>
        <a href="#" class="btn btn-primary">Ja</a>
      </div>
    </div>
  </div>
</div><!-- Delete modal -->



<div class="container">
  <div class="col-md-12">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title"> Sidor </h3>
      </div>
      <div class="panel-body">
        <div class="just-padding">
          <div class="list-group list-group-root well">
            {% for page in pages recursive %}
            <div class="list-group-item">
              /{{ page.permalink }} - {{ page.title }}
              <a href="{{url_for('admin_page', id=page.id)}}" class="btn btn-default"><span class="glyphicon glyphicon-pencil"></a>
              {% if page.endpoint %}
              {% else %}
              <a href="{{url_for('admin_newpage', parent=page.id)}}" class="btn btn-success"><span class="glyphicon glyphicon-plus"></a>
              {% endif %}
              {% if page.id != 1 %}
              {% if not page.children %}
              {{ delete_button('page', page.title, page.id) }}
              {% endif %}
              {% endif %}
            </div>
            {% if page.children %}
            <div class="list-group">
              {{ loop(page.children) }}
            </div>
            {% endif %}
            {% endfor %}
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-md-12">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title"> Foton </h3>
      </div>
      <div class="panel-body">
        <div class="panel panel-primary">
          <div class="panel-heading">
            Ladda upp foto
          </div>
          <div class="panel-body">
            <form method="post" action="{{url_for('upload')}}" class="form-inline" enctype="multipart/form-data">
              <div class="input-group">
                <label class="input-group-btn">
                  <span class="btn btn-primary">
                    <span class="glyphicon glyphicon-folder-open"></span>
                    <span class="glyphicon glyphicon-option-horizontal"></span>
                    <input name="photo" type="file" style="display: none;" id="photo-upload">
                  </span>
                </label>
                <input type="text" class="form-control" readonly id="photo-name">
              </div>
              <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-upload"></button>
            </form>
          </div>
        </div>
        {% for photo in photos %}
        <div class="col-md-2">
          <div class="thumbnail">
            <img src="{{ photo.thumbnail }}" class="img-responsive">
            <div class="panel-footer">
              <a class="btn btn-default"><span class="glyphicon glyphicon-pencil"></a>
              {{ delete_button('photo', photo.alt, photo.id) }}
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
</div>
{% endblock %}


{% block scripts %}
{{super()}}
<script>
$('#deletemodal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget)
  var type = button.data('type')
  var id = button.data('id')
  var title = button.data('title')

  var modal = $(this)
  if(type == 'page') {
    var message = 'Vill du verkligen ta bort sidan - ' + title + '?'
    var href = '/admin/delpage/' + id
  } else {
    var message = 'Vill du verkligen ta bort bilden - ' + title + '?'
    var href = '##'
  }
  modal.find('.modal-body p').text(message)
  modal.find('.modal-footer a').attr('href', href)
})

$('#photo-upload').on('change', function (event) {
  var filename = $(this).val()
  filename = filename.replace(/\\/g, "/")
  filename = filename.replace(/.*\//, "")
  $('#photo-name').val(filename)
});

</script>
{% endblock %}