{% load combo %}
<h2>Appels{% if callee %} (ligne {{callee}}){% endif %}</h2>

<div id="calls" data-calls="{{ json|as_json }}">
{% if json %}  {# callee has been set #}
{% for call in json.data.current %}
{% if forloop.first %}<strong>Appel en cours</strong>{% endif %}
<div>
  {{call.start|parse_datetime|date:"H:i"}} :
  {{ call.caller }}
</div>
{% endfor %}
{% for call in json.data.past|slice:":5" %}
{% if forloop.first %}<strong>Appels passés</strong>{% endif %}
<div>
  {{call.start|parse_datetime|date:"H:i"}} :
  {{ call.caller }}
</div>
{% endfor %}
{% endif %}
</div>

<div>
<form>
{% if not callee %}
<div class="infonotice">
  Il est nécessaire de renseigner un numéro de ligne
  pour le service téléphonique.
</div>
{% endif %}
<input {% if callee %}type="hidden"{% else %}type="text"{% endif %} name="callee" value="{{ callee }}">
{% if not callee %}<button>✓</button>{% endif %}
</form>
{% if callee %}<button class="release-line">Libérer la ligne</button>{% endif %}
</div>

<script>
$(function() {
  var $cell = $('.configjsoncell.phonecalls');
  {% if not callee %}
  var callee = window.localStorage.publik_phone_callee;
  if (callee) {
    window.history.replaceState({}, "", "?callee=" + callee);
    combo_load_cell($cell);
  }
  {% else %}
  window.localStorage.publik_phone_callee = "{{ callee }}";
  if (window.location.search != "?callee={{ callee }}") {
    window.history.replaceState({}, "", "?callee={{ callee }}");
  }
  var current_calls = $cell.find('#calls').data('calls');
  function get_caller(calls) {
    if (calls && calls.data && calls.data.current && calls.data.current.length) return calls.data.current[0].caller;
    return null;
  }
  function refresh_calls() {
    $.ajax({url: $cell.data('ajax-cell-url') + '?callee={{ callee }}',
            type: 'POST',
            data: {'action': 'refresh'},
            success: function(data) {
              new_content = $('<div>' + data + '</div>');
              var new_calls = $(new_content).find('#calls').data('calls');
              var new_caller = get_caller(new_calls);
              if (get_caller(current_calls) != new_caller) {
                current_calls = new_calls;
                $('#calls').replaceWith($(new_content).find('#calls'));
                if (new_caller) {
                  var $search = $('.combo-search-input');
                  if ($search.val() == '' && ! $search.is(':focus')) {
                    $search.val(new_caller).trigger('change');
                  }
                }
              }
            }
     });
  }
  setInterval(refresh_calls, 2500);
  $('button.release-line').on('click', function() {
    window.localStorage.publik_phone_callee = "";
    window.history.replaceState({}, "", "?");
    combo_load_cell($cell);
    return false;
  });
  {% endif %}
});
</script>