{% load gadjo %}
<script src="{{site_base}}{% xstatic 'jqueryui' 'jquery-ui.min.js' %}"></script>
<section class="mes-informations">
<span></span> {# to avoid :first-child #}
<h2>Mes centres d’intérêts</h2>

<div id="interests">
<div class="interests-types">

<div><h3>Thème</h3>
<ul class="interests-list">
  {% for interest in json.data %}
    {% if interest.typeId == interest_theme_id %}
    <li>
      <span class="name">{{ interest.name }}</span>
    </li>
    {% endif %}
  {% endfor %}
</ul>
</div>

<div><h3>Quartier</h3>
<ul class="interests-list">
  {% for interest in json.data %}
    {% if interest.typeId == interest_quartier_id %}
    <li>
      <span class="name">{{ interest.name }}</span>
    </li>
    {% endif %}
  {% endfor %}
</ul>
</div>

</div>
</div>

<div class="actions">
  <button class="btn-square--bordered--core" id="interests-edit-button"><span class="flexbox"><span class="btn-text">Modifier mes centres d’intérêts</span><span class="btn-arrow"></span></span></button>
</div>

<script>
$(function() {
  $('#interests-edit-button').on('click', function() {
    $('#interests-edit-form').dialog({
            title: 'Mes centres d’intérêts',
            modal: true,
            dialogClass: 'dlg-interests',
            width: 'auto'
    });
    $('#interests-cancel-button').on('click', function() {
      $('#interests-edit-form').dialog('destroy');
      return false;
    });
  });
});
</script>

<form id="interests-edit-form" method="POST" action="{{ site_base }}{% url 'combo-public-ajax-page-cell' page_pk=cell.page.id cell_reference=cell.get_reference %}" style="display: none">
<input type="hidden" name="action" value="update"/>
<h1>Mes centres d’intérêts</h1>

<div class="interests-types">

<div><h3>Par thématique</h3>
<ul class="interests-list">
  {% for interest in interests.data %}
    {% if interest.typeId == interest_theme_id %}
    <li>
      <label>
      <input name="interests[]" type="checkbox" value="{{ interest.id }}"
        {% for user_interest in json.data %}
          {% if user_interest.id == interest.id %}checked{% endif %}
        {% endfor %}
        >
      <span class="name">{{ interest.name }}</span>
      </label>
    </li>
    {% endif %}
  {% endfor %}
</ul>
</div>

<div><h3>Par quartier</h3>
<ul class="interests-list">
  {% for interest in interests.data %}
    {% if interest.typeId == interest_quartier_id %}
    <li>
      <label>
      <input name="interests[]" type="checkbox" value="{{ interest.id }}"
        {% for user_interest in json.data %}
          {% if user_interest.id == interest.id %}checked{% endif %}
        {% endfor %}
        >
      <span class="name">{{ interest.name }}</span>
      </label>
    </li>
    {% endif %}
  {% endfor %}
</ul>
</div>

</div>


<div class="actions">
  <button class="btn-square--bordered--core" id="interests-cancel-button"><span class="flexbox"><span class="btn-text">Annuler</span></span></button>
  <button class="btn-square--filled--second" id="interests-edit-button"><span class="flexbox"><span class="btn-text">Enregistrer mes centres d’intérêts</span><span class="btn-arrow"></span></span></button>
</div>

</form>

</section>
