{% extends "account/base.html" %}
{% load static %}
{% load i18n %}
{% load account socialaccount %}
{% load crispy_forms_tags %}

{% block javascript %}
{{ block.super }}

{% endblock javascript %}
<script>
$(function() {
    // Handler for .ready() called.
    var mymap = L.map('addressMap').setView([41.89193, 12.51133], 4);
        L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1,
        accessToken: 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', // 'your.mapbox.access.token'
    }).addTo(mymap);

    mymap.on('click', function(e){
      var coord = e.latlng;
      var lat = coord.lat;
      var lng = coord.lng;
      $('input[name ="latitude"]').val(lat);
      $('input[name ="longitude"]').val(lng);
    });
});
</script>

{% block title %}User: {{ user.username }}{% endblock %}

{% block inner %}
{% if user.is_authenticated %}
    <h1>
    {{ user.username }}
    </h1>

    <form class="form" method="post" action="{% url 'profile.update' %}">
        {% csrf_token %}
        {%comment%} {{ form|crispy }} {%endcomment%}
        {% for field in form %}
            {% if field.name == 'latitude' %}
                <div id="addressMap"></div>
            {% endif %}
            {{ field|as_crispy_field }}
        {% endfor %}

        <div class="control-group">
            <div class="controls">
                <button type="submit" class="btn btn-primary btn-lg float-right">{% trans "Update" %}</button>
            </div>
        </div>
    </form>

{% else %}
    <h1>
    {% blocktrans %}You are not logged in.{% endblocktrans %}
    </h1>

    <div class="row">
        <div class="col-md-8 offset-md-2 col-lg-6 offset-lg-3">
            <a class="btn btn-primary" href="{% url 'account_login' %}" role="button">
            {% trans "Login" %}
            </a>
        </div>

        <div class="col-sm-12">
            <a class="btn btn-primary" href="{% url 'account_signup' %}" role="button">
            {% trans "Register" %}
            </a>
        </div>
    </div>
{% endif %}
{% endblock inner %}