{% extends "admin/base.html" %}
{% load static %}

{% block title %} Autograph | HubStation {% endblock %}
{% block subtitle %}
Edition de Classes 
{% endblock %}

{% block extrastyle %}
    <link rel="stylesheet" href="{% static 'alertify/alertify.min.css' %}">
    <script src="{% static 'alertify/alertify.min.js' %}"></script>
{% endblock %}


{% block content_title %}
<div class="d-flex">
	<div>
		<img style="width:60px;height:60px;border-radius:100%;" src="/static/global/autograph.png">
		<span class="text-primary"> Autograph </span>
	</div>
</div>
{% endblock %}

{% block content %}

<div class="col-12">

<div class="container mt-4">
  <h2 class="text-centers mb-4">Des Graphiques pour vos Données</h2>
  <div class="text-centers pb-2">
    <a> <i class="fas fa-plus"></i> Nouveau Graphique</a>
  </div>

  <div>
    <div>
        <div><span class="badge bg-primary"> Graphique 1</span></div>
    </div>
    <div class="row pt-3">
      <div class="col-12 col-md-4 col-lg-3">
        <div class="card">
          <div class="card-body">
            <div class="field-box">
              <div> Type de Graphique</div>
            	<div class="d-flex flex-wrap">
            	 <div class="p-2">
                <span class="btn border"><i class="fas fa-pie-chart fa-2x"></i> </span>
               </div>
               <div class="p-2">
                <span class="btn border"><i class="fas fa-chart-line fa-2x"></i> </span> 
               </div>
               <div class="p-2">
                <span class="btn border"><i class="fas fa-chart-bar fa-2x"></i> </span> 
               </div>
               <div class="p-2">
                <span class="btn border"><i class="fas fa-chart-area fa-2x"></i> </span> 
               </div>
            	</div>
            </div>
            <div class="field-box">
              <div> Nom du Graphique </div>
              <div class="py-2">
                <input type="" class="form-control" name="">
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-12 col-md-8 col-lg-9">
        <div class="card">
          <div class="card-body">
            <div> Selectionner les Parametres </div>

            {% for model in object_apps_list %}
            <div class="py-3">
              <div class="h5" style="text-transform: capitalize;"> {{model.app}} </div>
            </div>
            {% endfor %}

            <div class="pt-3">
              <div> <span class="badge bg-secondary"> Etat_Civil </span> </div>
              <ul class="pt-1 list-group">
                <div class='py-1'>
                <li class="list-group-item">
                  <input type="checkbox" name="">
                  <label> Citoyen <i class="fas fa-angle-right"></i></label>
                </li>
              </div>
                <div class='py-1'>
                <li class="list-group-item">
                  <input type="checkbox" name="">
                  <label> Naissance <i class="fas fa-angle-right"></i></label>
                </li>
              </div>
                <div class='py-1'>
                <li class="list-group-item">
                  <input type="checkbox" name="">
                  <label> Deces <i class="fas fa-angle-right"></i></label>
                </li>
              </div>
              </ul>
            </div>
          </div>
        </div>
      </div>


      <!-- Tableau de données -->
      
      <div class="col-md-12 d-none">
        <div class="card">
          <div class="card-body">
            <div> Apercu </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

</div>

{% endblock %}


{% block script %}



{% endblock %}
