{% extends "base.html" %}
{% load i18n %}
{% load leaflet_tags %}

{% block title %}{% trans "SAFE - Scenario Assesment for Emergencies" %}{% endblock %}

<!-- Le css -->
{% block head %}
  {{ block.super }}
  {% leaflet_css %}
  <link href="{{ STATIC_URL }}safe/css/safe.css" rel="stylesheet">
  <link href="{{ STATIC_URL }}safe/css/syntax.css" rel="stylesheet">
  <link href="{{ STATIC_URL }}safe/css/MarkerCluster.css"  rel="stylesheet" />
  <link href="{{ STATIC_URL }}safe/css/MarkerCluster.Default.css" rel="stylesheet" />
{% endblock %}

<!-- Le html -->
{% block middle %}
  {% leaflet_map "safemap" %}
{% endblock middle %}

{% block footer %}
  <div id="question">

    <div id="branding" class="pull-left">
      <h2>SAFE</h2>
      <p>Scenario Assesment<br>For Emergencies</p>
    </div>

    <form class="safeform form-horizontal" id="calculateform">
      {% csrf_token %}
      <label id="hazardlabel" for="hazard">In the event of</label> 
      <select class="input" name="hazard" id="hazardlist"></select>
      <label id="exposurelabel" for="exposure">how many</label> 
      <select class="input" name="exposure"  id="exposurelist"></select>
      <label id="functionlabel" for="function">might</label> 
      <select class="input" name="function" id="functionlist"></select>
      <img id="questionmark" height='30px' src="{{ STATIC_URL }}safe/img/question.svg" />
    </form>
  </div>
  <div id="answer">
    <div class="row">
      <div id="answerpanel" class="span2">
        <img id="answermark" height='120px' src="{{ STATIC_URL }}safe/img/answer.svg" />
        <div id="canvas-loader">
          <div id="block_1" class="barlittle"></div>
          <div id="block_2" class="barlittle"></div>
          <div id="block_3" class="barlittle"></div>
          <div id="block_4" class="barlittle"></div>
          <div id="block_5" class="barlittle"></div>
        </div>
        <a id="reset" style="display:none" class="btn">Ask again</a>

      </div>
      <div id="result" class="span5">
         <h2>Action Checklist</h2>
          <div id="summary">
            <p></p>
          </div>
      </div>
      <div id="calculation" class="span4">
         <div class="page-header">
            <h1>Impact assesment <small>calculation result</small></h1>
          </div>
        <dl class="dl-horizontal">
          <dt>Running time</dt>
          <dd id="duration">seconds</dd>
          <dt>Running date</dt>
          <dd id="date"></dd>
          <dt>Author</dt>
          <dd>AIFDR</dd>
          <dt>Confidence rating</dt>
          <dd>low (20%)</dd>
        </dl>
      </div>
  </div>
  </div>
{% endblock footer %}

<!-- Le Javascript -->
{% block extra_script %}
{% leaflet_js %}
<script src="{{ STATIC_URL }}safe/js/markercluster.js" ></script>
<script src="{{ STATIC_URL }}safe/js/safe.js" ></script>
{% endblock extra_script %}