{% extends "user/layout.html.twig" %}

{% set pageName = 'user-profile with-sidebar with-section' %}
{% set pageTitle = "my_parameters._label"|trans %}

{# BODY CONTENT #}
{% block body_user_content %}

<h1 style="margin-bottom: 3.5rem;">{{ "my_parameters._label"|trans }}</h1>

<form action="{{ path('gogo_user_profile') }}" method="POST" class="gogo_user_profile simple-form form-horizontal">

  <div class="error" style="margin-top: 15px">{{ form_errors(form.username) }}</div>
  <div class="input-field col s12">
      <i class="material-icons gogo-icon-account-circle prefix"></i>
      {{ form_widget(form.username, {'id': 'input-username', 'attr': {'class': 'validate'}}) }}
      <label for="input-username" class="gogo-form-label">{{ "commons.username"|trans }}</label>
  </div>

  <div class="error" style="margin-top: 15px;">{{ form_errors(form.email) }}</div>
  <div class="input-field col s12" style="{{ user.email|length > 0 ? 'display:none' : '' }}">
      <i class="material-icons gogo-icon-account-circle prefix"></i>
      {{ form_widget(form.email, {'id': 'input-email', 'attr': {'class': 'validate'}}) }}
      <label for="input-username" class="gogo-form-label">Email</label>
  </div>

  <p class="newsletter-explanation gogo-neutral">{{ "commons.newsletter-explanation"|trans }}</p>

  {{ form_widget(form.newsletterFrequency, { 'id': "select-newsletterFrequency"}) }}

  <div class="separator"></div>
  <div class="error" style="margin-top: 15px">{{ form_errors(form.location) }}</div>
  <div class="input-field col s12">
      <i class="material-icons gogo-icon-marker-symbol prefix"></i>
      {{ form_widget(form.location, {'id': 'input-location', 'attr': {'class': 'validate'}}) }}
      <label for="input-location" class="gogo-form-label">{{ "my_parameters.input_location"|trans }}</label>
  </div>

  <div class="separator"></div>
  <i class="material-icons gogo-icon-filters-1 range-icon-prefix"></i>
  <div class="range-field col s12">
      <label class="gogo-form-label active">{{ "my_parameters.range"|trans() }} <span class="range-value">{{ form.vars.value.newsletterRange }} {{ "my_parameters.unit"|trans() }}</span></label>
      {{ form_widget(form.newsletterRange, {'id': 'input-range'}) }}
  </div>

  <div id="address-preview-map"></div>

  {{ form_rest(form) }}

  <button type="submit" class="btn btn-success">{{ "action.submit"|trans }}</button>
</form>

{% endblock %}

{% block user_page_javascripts %}
  <script>
    $(document).ready(function()
    {
      $('.range-value').text($('#input-range').val());
      $('#input-range').on('input', function() {
        $('.range-value').text($(this).val());
      });

      var user = {{ user | json_encode | raw }}
      var defaultTileLayer = {{ config.defaultTileLayer.toJson|raw }};
      var map, marker, mapCenter;

      initMap();

      // Map initialisation
      function initMap()
      {
        mapZoom = 8;
        userIsGeolocalized = user.geo && user.geo.latitude
        console.log(user);
        if (userIsGeolocalized)
        {
          markerPosition = new L.LatLng(user.geo.latitude, user.geo.longitude);
          mapCenter = markerPosition;
          mapZoom = 12;
        }

        map = L.map('address-preview-map', {
            center: mapCenter,
            zoom: mapZoom,
            zoomControl: true,
            scrollWheelZoom : false
        });

        L.tileLayer(defaultTileLayer).addTo(map);

        // if (markerPosition)  marker = new L.Marker(markerPosition, { draggable: false } );
        if (userIsGeolocalized)
        {
          {% set secondaryColor = config.getDefaultColor("secondaryColor") %}
          var circle = L.circle(markerPosition, {
              color: '{{ secondaryColor }}',
              opacity: 0.8,
              fillColor: '{{ secondaryColor }}',
              fillOpacity: 0.5,
              radius: user.newsletterRange * 1000
          });

          var circleCenter = L.circle(markerPosition, {
              color: '{{ secondaryColor }}',
              fillColor: '{{ secondaryColor }}',
              fillOpacity: 1,
              radius: 100
          });

          var group = new L.featureGroup([circle, circleCenter]);
          group.addTo(map);
          map.fitBounds(group.getBounds());
        }
        else
        {
          map.fitBounds({{ config.getDefaultBounds | json_encode | raw }});
        }
      }

    });
  </script>
{% endblock %}