{% extends 'layout.html' %}

{% block content %}

<h2>IRIS Stats &ndash; {{city|capitalize}} / {{name|capitalize}}</h2>

<ol class="breadcrumb">
  <li><a href="/">Home</a></li>
  <li><a href="/map">Map</a></li>
  <li class="active">IRIS {{name|capitalize}}</li>
</ol>

 <div class="container" id="irisSummary" data-iris="{{iris}}">
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <div class="panel panel-primary">
          <div class="panel-heading">
            <h4 id="titlePanel">Description</h4>
          </div>
          <ul class="list-group">
            <li class="list-group-item" id="iris"><b>Iris</b>: {{iris}}</li>
            <li class="list-group-item" id="name"><b>Name</b>: {{name|capitalize}}</li>
            <li class="list-group-item" id="citycode"><b>Citycode</b>: {{citycode}}</li>
            <li class="list-group-item" id="city"><b>City</b>: {{city|capitalize}}</li>
            <li class="list-group-item" id="irisType"><b>Type</b>: {{iris_type}}</li>
          </ul>
        </div>
      </div>
      <div class="col-md-8" id="irisMap" data-iris="{{iris}}" style="height: 280px;">
      </div>
    </div>
  </div>

  <ul>
  <li><h3><a href="#population-title">Population</a></li></h3>
  <li><h3><a href="#housing-title">Housing</a></li></h3>
  <li><h3><a href="#employment-title">Employment</a></li></h3>
  </ul>

  <hr>

  <h2 id="population-title">Population</h2>

  <h3><b id="population">Total : </b></h3>

  <div id="populationSex" data-iris="{{iris}}" style="width: 100%; height:400px;">
  </div>

  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <h3>Age</h3>
        <div id="populationAge" data-iris="{{iris}}" style="width: 100%; height:300px;">
        </div>
      </div>

      <div class="col-md-6">

        <h3>Age by Sex</h3>
        <div id="populationAgeSex" data-iris="{{iris}}" style="width: 100%; height:300px;">
        </div>
      </div>
    </div>
  </div>

  <hr>

  <h2 id="housing-title">Housing</h2>

  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <h3>Type</h3>
        <div id="logementType" data-iris="{{iris}}" style="width: 100%; height:300px;">
        </div>
      </div>

      <div class="col-md-6">

        <h3>Year</h3>
        <div id="logementYear" data-iris="{{iris}}" style="width: 100%; height:300px;">
        </div>
      </div>
    </div>
  </div>

    <div class="container">
    <div class="row">
      <div class="col-md-6">
        <h3>Room</h3>
        <div id="logementRoom" data-iris="{{iris}}" style="width: 100%; height:300px;">
        </div>
      </div>

      <div class="col-md-6">

        <h3>Area</h3>
        <div id="logementArea" data-iris="{{iris}}" style="width: 100%; height:300px;">
        </div>
      </div>
    </div>
  </div>

  <hr>

    <h2 id="employment-title">Employment</h2>

    <div class="container">
    <div class="row">
      <div class="col-md-6">
        <ul class="list-group">
          <li class="list-group-item" id="emplPopulation"><b>Population 15-64</b>: </li>
          <li class="list-group-item" id="emplActif"><b>Actif</b>: </li>
          <li class="list-group-item" id="emplChom"><b>Chômeur</b>: </li>
          <li class="list-group-item" id="emplTxChom"><b>Taux de chômage</b>: </li>
        </ul>
      </div>

      <div class="col-md-6">
        <div id="employment" data-iris="{{iris}}" style="width: 100%; height:300px;">
        </div>
      </div>
    </div>
    </div>

    <div class="container">
    <div class="row">
      <div class="col-md-6">
        <h3>Employment by sex</h3>
        <div id="employmentSex" data-iris="{{iris}}" style="width: 100%; height:300px;">
        </div>
      </div>

      <div class="col-md-6">

        <h3>Employment by age</h3>
        <div id="employmentAge" data-iris="{{iris}}" style="width: 100%; height:300px;">
        </div>
      </div>
    </div>
  </div>



{% endblock %}


{% block appjs %}
<script src="{{ url_for('static', filename='iris.js') }}" type="text/javascript"></script>
{% endblock %}
