{% extends "passerelle/manage.html" %}
{% load i18n %}

{% block breadcrumb %}
  {{ block.super }}
  <li class="ariane--list-item">
    <a class="ariane--link" href="{{ resource.get_absolute_url }}">{{ resource.title }}</a>
  </li>
  <li class="ariane--list-item">
    <a class="ariane--link" aria-current="page">{% trans "Demo view" %}</a>
  </li>
{% endblock %}

{% block appbar %}
{% endblock %}

{% block content %}
  <h1>{% trans "Demo view" %}</h1>
  <p>
    <button id="start">{% trans "Get FranceConnect data" %}</button>
  </p>
  <p>
    <label for="dgfip">{% trans "Get DGFIP data" %}</label>
    <input type="checkbox" id="dgfip"/>
  </p>
  <script>
    function popupwindow(url, title, w, h) {
      var left = (screen.width/2)-(w/2);
      var top = (screen.height/2)-(h/2);
      return window.open(
        url, title,
        'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
    }
    var popup = null;

    $('#start').on('click', function () {
      $('#user-info').hide();
      if (popup) { popup.close(); popup = null; };
      var url = 'init_request?test=1&origin={{ origin }}';
      var checkbox = document.getElementById('dgfip');
      if (checkbox && checkbox.checked) {
        url += '&mode=dgfip';
      };
      popup = popupwindow(url, 'FranceConnect', 1000, 670);
      if (window.focus) {
        popup.focus();
      }
    });
    $(window).on('message', function(event) {
      var data = event.originalEvent.data;
      var origin = event.originalEvent.origin;
      if (origin != window.location.origin) {
        return;
      }
      $.getJSON("data_source?id=" + data.id, function(result) {
        $('#user-info').show();
        $('#user-info-preview').text(JSON.stringify(result, null, 2));
      });
      popup.close();
    });
  </script>
  <div id="user-info" style="display: none; position: relative;">
    <h3>{% trans "Data-source data" %}</h3>
    <pre id="user-info-preview" style="background: white; border: 0.2ex solid black; color: black; padding: 1em; width: calc(100% - 5em);"></pre>
  </div>
{% endblock %}