{% load gadjo %}
{# <div style="position: absolute; top: 0; left: 0; width: 400px; z-index: 1000; background: #eee;">{{json}}</div> #}

{% if json.favorites %}<span class="is-favorited"></span>{% endif %} {# is in favorites #}

<div id="favorite-forms">
<form id="delete-favorite" method="POST" action="{{ site_base }}{% url 'combo-public-ajax-page-cell' page_pk=cell.page.id cell_reference=cell.get_reference %}">
  <input type="hidden" name="action" value="delete">
  <input type="hidden" name="favoriteId" value="{{json.favorites.0.id}}">
  <button>remove</button>
</form>

<form id="add-favorite" method="POST" action="{{ site_base }}{% url 'combo-public-ajax-page-cell' page_pk=cell.page.id cell_reference=cell.get_reference %}">
  <input type="hidden" name="action" value="add">
  <input type="hidden" name="url" value="{{request.META.HTTP_REFERER}}">
  <input type="hidden" name="title" value="">
  <input type="hidden" name="entityId" value="0">
  <input type="hidden" name="type" value="PROCEDURE">
  <button>set</button>
</form>
</div>

{% if not request.user.is_authenticated %}
<script src="{{site_base}}{% xstatic 'jqueryui' 'jquery-ui.min.js' %}"></script>
<div style="display: none" id="favorite-dlg">
<p>
Vous devez vous connecter à MonStrasbourg.eu pour ajouter un favori.</p>
</p>

<div class="actions">
  <button class="btn-square--bordered--core" id="favorites-cancel-button"><span class="flexbox"><span class="btn-text">Annuler</span></span></button>
  <button class="btn-square--filled--second" id="favorites-login-button"><span class="flexbox"><span class="btn-text">Me connecter / Créer un compte</span><span class="btn-arrow"></span></span></button>
</div>

</div>
{% endif %}

<script>
$(function() {
  if ($('#rub_service.has-sidebox').length == 0) {
    return; // favorites only for forms
  }
  if ($('.login-button').length) {
    $('.add-favorites.really-add').show();
    $('.add-favorites').on('click', function() {
      $('#favorite-dlg').dialog({
        title: 'Favoris',
        modal: true,
        dialogClass: 'dlg-favorites',
        width: 'auto'
      });
      $('#favorites-cancel-button').on('click', function() {
        $('#favorite-dlg').dialog('destroy');
        return false;
      });
      $('#favorites-login-button').on('click', function(e) {
        $('.login-button').trigger(e);
      });
      return false;
    });
    return;
  }
  $('#add-favorite input[name=title]').val($('#rub_service > h2').text());
  $('#favorite-forms').delegate('button', 'click', function() {
    var $form = $(this).parents('form');
    var params = $form.serialize();
    $('.add-favorites').addClass('processing');
    $.ajax({
      url: $form.attr('action'),
      method: 'POST',
      data: params,
      dataType: 'html',
      headers: {
       'X-Requested-With': 'XMLHttpRequest'
      },
      xhrFields: {
           withCredentials: true
      },
      crossDomain: true,
      success: function(data) {
        $('.add-favorites').toggle();
        var new_favorite_id = $(data).find('input[name=favoriteId]').val();
        $('input[name=favoriteId]').val(new_favorite_id);
        $('.add-favorites').removeClass('processing');
      }
    });
    return false;
  });
  $('.add-favorites').on('click', function() {
    if ($(this).hasClass('really-add')) { $('#add-favorite button').trigger('click'); }
    if ($(this).hasClass('actually-remove')) { $('#delete-favorite button').trigger('click'); }
    return false;
  });

  if ($('.is-favorited').length == 0) {
    $('.add-favorites.really-add').show();
  } else {
    $('.add-favorites.actually-remove').show();
  }
});
</script>
