<template name="state_details">
  <div class="modal fade">
    <div class="modal-dialog">
      <div class="modal-content">

        <div class="modal-header">
          <h4 class="modal-title">Detalji</h4>
        </div>

        <div class="modal-body">
          <div class="row">
            <div class="col-md-12 chart">
              <div><strong>Otpusni ventil:</strong> {{pretty_valve state.out_valve }}</div>
              <div><strong>Ulazni ventil/pumpa:</strong> {{pretty_valve state.in_valve }}</div>
                <div><strong>Dobavlja sliku:</strong> {{picture_requested state }}</div>
              <div><strong>Zadnja komunikacija: {{ last_communication_time }}</strong>
              </div>
              <div><strong>Zadnje zaljevanje: {{ last_out_valve_open }}</strong>
              </div>
              <div><strong>Zadnje punjenje: {{ last_in_valve_open }}</strong>
              </div>
            </div>
          </div>
          <div class="row hidden">
            <div class="col-md-12 chart">
              <h3>Temperatura:</h3>
              <div id="temperature_graph">
              </div>

            </div>
          </div>
          <div class="row hidden">
            <div class="col-md-12 chart">
              <h3>Vlažnost:</h3>
              <div id="humidity_graph">
              </div>
            </div>
          </div>
        </div>

        <div class="modal-footer">
          <button id="close_details" class="btn btn-default" name="close_details" data-dismiss="modal">Zatvori</button>
        </div>

      </div>
    </div>
  </div>

</template>
