{% extends "ContentManagementBundle::layout.html.twig" %}

{% block page_title %}{{ 'content_management.titles.saved_entries'|trans }} - {{ parent() }}{% endblock %}

{% block head %}
{{ parent() }}
<link rel="stylesheet" href="{{ asset('bundles/contentmanagement/css/cms.css') }}" >
{% endblock %}

{% block cms_content %}
  {% if not app.request.xmlHttpRequest %}
  <style>
  .bookmarks { width:100%; padding:0 20px; }
  .bookmarks li { padding-top:10px; padding-bottom:10px; border-bottom:1px solid #dbe0e2; }
  .bookmarks li:before { font-size:145%; }
  .bookmarks li a { font:400 110% GE_SS; }
  .bookmarks li button.close { position:absolute; left:0; top:10px; font-size:16px; }
  .bookmarks li div.bookmark-msg { width:100%; height:100%; background-color:#dbe0e2; position:absolute; top:0; right:0; padding:12px; font:400 110% GE_SS }
  </style>
  <div class="col-xs-12">
    <div style="background:#fff; padding:5px 20px; margin:20px 0; border-radius:10px;">
      <h1 class="title">
        <span class="icon-save" style="color:#90a4ae; font-size:80%;"></span> {{ 'content_management.titles.saved_entries'|trans }}
        <span class="pull-reverse" style="background:#f4f4f4; border-radius:5px; padding:5px 10px;">{{ bookmarks_count }}</span>
      </h1>
    </div>
    <div class="content">
      <ul class="list-unstyled icon-list bookmarks">
    {% endif %}
        {% for bookmark in bookmarks %}
        {% set entry = bookmark.entry %}
        <li class="icon-{{ entry.type.listName }} row" data-id="{{ entry.id }}">
          <div class="col-sm-10">
            <a href="{{ path('entry_view', { 'type_name': entry.type.name, 'local_id': entry.localId }) }}">{{ entry.title }}</a>
          </div>
          <div class="col-sm-2 time"><span class="icon-time"></span> {{ bookmark.createdAt|time_ago }}</div>
          <button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
        </li>
        {% endfor %}
        {% if not isLastPage %}
        <li id="pager-wpr">
          {% set lastItem = bookmarks|last %}
          {% set page = app.request.query.get('page', 1) %}
          <a id="load-more" href="{{ path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')|merge({ 'page': page + 1 })) }}">{{ 'Show more'|trans }}</a>
        </li>
        {% endif %}
  {% if not app.request.xmlHttpRequest %}
      </ul>
    </div>
  </div>
  {% endif %}
{% endblock %}

{% block js_document_ready %}
setupUnlimitedScroll();
$(document).on('click', '.bookmarks li button.close', function() {
  var _container = $(this).closest('li');
  deleteBookmark(_container.data('id'), function() {
    $('<div><span class="pull-normal">{{ 'content_management.messages.bookmark_is_deleted'|trans }}</span><a href="#" class="undo pull-reverse">{{ 'Undo'|trans }}</a></div>').addClass('bookmark-msg').appendTo(_container);
  });
});
$(document).on('click', '.bookmarks .bookmark-msg a.undo', function() {
  var _container = $(this).closest('li');
  addBookmark(_container.data('id'), function() {
    $('.bookmark-msg', _container).remove();
  });
});
{% endblock %}