{% extends 'base.html'%}
{% load crispy_forms_tags %}
{% include 'element_change.html' %}
{% block title %} Kiln details{% endblock %}

{% block content %}
<h2>KILN PROPERTIES</h2><hr>
<div class="grid-container-two">
  <div class="col-dm-6">
    <h2>Kiln Name: {{ kiln.KilnName }}</h2>
    <h4>Kiln ID: {{ kiln.KilnId }}</h4>
    <i><h6>Kiln Type: {{ kiln.KilnType }}</h6></i>
    <i><h6>Supplier : {{ kiln.SupplierId.SupplierName }}</h6></i>
  </div>
  <div class="" style="padding-top:20px;">
      {% if kiln.Status %}
      <p style="color:#004d1a;">STATUS: RUNNING</p>
      <i class="fas fa-check-circle fa-3x" title="Solve" style="color:green;padding-bottom:12px;"></i>
      {% else %}
      <p style="color:#990000;">STATUS: STOPPED</p>
      <i class="far fa-times-circle fa-3x" title="Decline" style="color:red;padding-bottom:12px;"></i>
      {% endif %}
  </div>
</div><br>
  <hr>

    {% if zones.count > 0 %}
        <h5>Zones and Elements : </h5>
        {% for zone in zones %}
        <div class="grid-container">
          {% if zone.ZoneNumber == 10 %}
            <div class=""><a href="{% url 'Monitoring_App:zone' kiln=kiln.KilnId zone=zone.ZoneId %}" style="text-decoration: none; color:black; text-align:center; font-size:18px;">Zone Number:{{ zone.ZoneNumber }}</a></div>
          {% else %}
            <div class=""><a href="{% url 'Monitoring_App:zone' kiln=kiln.KilnId zone=zone.ZoneId %}" style="text-decoration: none; color:black; text-align:center; font-size:18px;">Zone Number: {{ zone.ZoneNumber }}</a></div>
            {% endif %}
            {% if kiln.kiln_element.all.count > 0 %}
              {% for i in range %}
                {% for element in kiln.kiln_element.all %}
                  {% if element.Status == 0 %}
                    {% if element.ZoneId.ZoneNumber == zone.ZoneNumber %}
                      {% if element.Position == i %}
                        {% if element.Danger == True  %}
                          <a href="{% url 'Monitoring_App:single_element' kiln=kiln.KilnId zone=zone.ZoneId position=element.Position %}" style="color:black; text-align:center; text-decoration: none;"><div class="item2" style="margin-right:3px;background-color: #ff704d;padding-top:10px;"> {{ element.Position }}</div></a>
                        {% else %}
                          <a href="{% url 'Monitoring_App:single_element' kiln=kiln.KilnId zone=zone.ZoneId position=element.Position %}" style="color:black; text-align:center; text-decoration: none;"><div class="item2" style="margin-right:3px;background-color: #99ff99;padding-top:10px;"> {{ element.Position }}</div></a>
                        {% endif %}
                      {% endif %}
                    {% endif %}
                  {% endif %}
                {% endfor %}
              {% endfor %}
            {% else %}
              <h3 class="btn" style="background-color: #333333; color:white;">Add Elements</h3><br>
            {% endif %}
          </div>
        {% endfor %}
      {% else %}
        <h3>No elements in this zone</h3><br>
      {% endif %}

<br><br>
<h3>KILN SCHEME</h3><hr>
<div class="col-dm-6">
<img src="/media/measurement_images/kiln_en_scheme_left.png" width="100%">
</div>
<br><br>


{% endblock %}