{% extends 'base.html.twig' %}

{% block title %}Enregistrer une distance{% endblock %}

  {% block header %}  

        <!-- Datatables css -->
        <link href="assets/vendor/datatables.net-bs5/css/dataTables.bootstrap5.min.css" rel="stylesheet" type="text/css" />
        <link href="assets/vendor/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css" rel="stylesheet" type="text/css" />
        <link href="assets/vendor/datatables.net-fixedcolumns-bs5/css/fixedColumns.bootstrap5.min.css" rel="stylesheet" type="text/css" />
        <link href="assets/vendor/datatables.net-fixedheader-bs5/css/fixedHeader.bootstrap5.min.css" rel="stylesheet" type="text/css" />
        <link href="assets/vendor/datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css" rel="stylesheet" type="text/css" />
        <link href="assets/vendor/datatables.net-select-bs5/css/select.bootstrap5.min.css" rel="stylesheet" type="text/css" />

        <!-- Theme Config Js -->
        <script src="assets/js/hyper-config.js"></script>

        <!-- App css -->
        <link href="assets/css/app-creative.min.css" rel="stylesheet" type="text/css" id="app-style" />

        <!-- Icons css -->
        <link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
{% endblock %}

  {% block body %}
    <div class="content-page">
      <div class="content">
        <!-- Start Content-->
        <div class="container-fluid">
          <div class="row">
            <div class="col-12">
              <div class="page-title-box">  
                <form method="post" style="max-width: 700px; margin: 20px auto;padding: 20px; border: 1px solid white;border-radius: 8px;">
                  {{ form_start(form) }}
                  <div class="mb-3">
                    {{ form_label(form.origin, null, {'label_attr': {'class': 'form-label'}}) }}
                    {{ form_widget(form.origin, {'attr': {'class': 'form-control'}}) }}
                  </div>
                  <div class="mb-3">
                    {{ form_label(form.destination, null, {'label_attr': {'class': 'form-label'}}) }}
                    {{ form_widget(form.destination, {'attr': {'class': 'form-control'}}) }}
                  </div>
                  
                      <button type="submit">Calculer la distance</button>
                      {{ form_end(form) }}

                </form>
<div>
                    {#pour tester la mise en forme sans utiliser une demande via l'api^^}    <p>Distance entre la et ici : 154km</p>#}
                    </div>
                {% if distance is not null %}
                    <div>
                        <p>Distance entre {{ origin }} et {{ destination }} : {{ distance }}</p>
                    </div>
                {% endif %}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
{% endblock %}