{% extends "base.html" %} {% block title %}Notifications{% endblock %}

{% block content %}

<div class="container mt-5">
  <h1 class="mb-4">Here you can see the latest alerts!</h1>
  
  <div class="card mb-4">
    <div class="card-body">
        <h4 class="card-title">Light</h4>
        
        <!-- Today's Values Collapse Trigger -->
        <h6 class="todays-values">
            <a data-toggle="collapse" href="#lightTodays" role="button" aria-expanded="false" aria-controls="lightTodays" class="collapse-toggle neutral-link">
                <i class="fas fa-chevron-right"></i> today's ({{dt}}) alerts
            </a>
        </h6>
        <!-- Collapsible Content -->
        <div class="collapse" id="lightTodays">
            <p class="card-text">
                {% if todays %}
                    {% if 'light' not in todays.keys() %}
                        There are no alerts from today.<br />
                        <br>
                    {% else %}
                        {% for item in todays['light'] %}
                            {{item}}<br />
                        {% endfor %}
                    {% endif %}
                    <br>
                {% else %}
                    There are no alerts from today.<br />
                    <br>
                {% endif %}

            </p>
        </div>

        
        <!-- Other Values Collapse Trigger -->
        <h6 class="other-values">
            <a data-toggle="collapse" href="#lightOthers" role="button" aria-expanded="false" aria-controls="lightOthers" class="collapse-toggle neutral-link">
                <i class="fas fa-chevron-right"></i> previous alerts
            </a>
        </h6>
        <!-- Collapsible Content -->
        <div class="collapse" id="lightOthers">
            <p class="card-text">
                {% if l %}
                    {% if 'light' not in l.keys() %}
                        There are no previous alerts.
                    {% else %}
                        {% for item in l['light'] %}
                            {{item}}<br />
                        {% endfor %}
                    {% endif %}
                {% else %}
                    There are no previous alerts.
                {% endif %}

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

  <div class="card mb-4">
    <div class="card-body">
        <h4 class="card-title">Temperature</h4>
        
        <!-- Today's Values Collapse Trigger -->
        <h6 class="todays-values">
            <a data-toggle="collapse" href="#tempTodays" role="button" aria-expanded="false" aria-controls="tempTodays" class="collapse-toggle neutral-link">
                <i class="fas fa-chevron-right"></i> today's ({{dt}}) alerts
            </a>
        </h6>
        <!-- Today's Values Collapse Content -->
        <div class="collapse" id="tempTodays">
            <p class="card-text">
                {% if todays %}
                    {% if 'temp' not in todays.keys() %}
                        There are no alerts from today.<br />
                        <br>
                    {% else %}
                        {% for item in todays['temp'] %}
                            {{item}}<br />
                        {% endfor %}
                    {% endif %}
                    <br>
                {% else %}
                    There are no alerts from today.<br />
                    <br>
                {% endif %}

            </p>
        </div>

        <!-- Other Values Collapse Trigger -->
        <h6 class="other-values">
            <a data-toggle="collapse" href="#tempOthers" role="button" aria-expanded="false" aria-controls="tempOthers" class="collapse-toggle neutral-link">
                <i class="fas fa-chevron-right"></i> previous alerts
            </a>
        </h6>
        <!-- Other Values Collapse Content -->
        <div class="collapse" id="tempOthers">
            <p class="card-text">
                {% if l %}
                    {% if 'temp' not in l.keys() %}
                        There are no previous alerts.
                    {% else %}
                        {% for item in l['temp'] %}
                            {{item}}<br />
                        {% endfor %}
                    {% endif %}
                {% else %}
                    There are no previous alerts.
                {% endif %}

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

  <div class="card mb-4">
    <div class="card-body">
        <h4 class="card-title">Deflection</h4>
        
        <!-- Today's Values Collapse Trigger -->
        <h6 class="todays-values">
            <a data-toggle="collapse" href="#defTodays" role="button" aria-expanded="false" aria-controls="defTodays" class="collapse-toggle neutral-link">
                <i class="fas fa-chevron-right"></i> today's ({{dt}}) alerts
            </a>
        </h6>
        <!-- Today's Values Collapse Content -->
        <div class="collapse" id="defTodays">
            <p class="card-text">
                {% if todays %}
                    {% if 'def' not in todays.keys() %}
                        There are no alerts from today.<br />
                        <br>
                    {% else %}
                        {% for item in todays['def'] %}
                            {{item}}<br />
                        {% endfor %}
                    {% endif %}
                    <br>
                {% else %}
                    There are no alerts from today.<br />
                    <br>
                {% endif %}

            </p>
        </div>

        <!-- Other Values Collapse Trigger -->
        <h6 class="other-values">
            <a data-toggle="collapse" href="#defOthers" role="button" aria-expanded="false" aria-controls="defOthers" class="collapse-toggle neutral-link">
                <i class="fas fa-chevron-right"></i> previous alerts
            </a>
        </h6>
        <!-- Other Values Collapse Content -->
        <div class="collapse" id="defOthers">
            <p class="card-text">
                {% if l %}
                    {% if 'def' not in l.keys() %}
                        There are no previous alerts.
                    {% else %}
                        {% for item in l['def'] %}
                            {{item}}<br />
                        {% endfor %}
                    {% endif %}
                {% else %}
                    There are no previous alerts.
                {% endif %}

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

<script>
    $(document).ready(function(){
        // Event fired when a collapse element is shown
        $('.collapse').on('show.bs.collapse', function(){
            // Find the associated toggle link and change the arrow to down
            $(this).prev().find('.fas').removeClass('fa-chevron-right').addClass('fa-chevron-down');
        });
        
        // Event fired when a collapse element is hidden
        $('.collapse').on('hide.bs.collapse', function(){
            // Find the associated toggle link and change the arrow to right
            $(this).prev().find('.fas').removeClass('fa-chevron-down').addClass('fa-chevron-right');
        });
    });
</script>


<style> .neutral-link {
    color: inherit;    /* Ensure the link color is the same as surrounding text */
    text-decoration: none; /* Remove underline */
}

.neutral-link:hover, .neutral-link:focus {
    text-decoration: none; /* No underline on hover/focus */
}

/* Optional: You might want to add a different style for hover, like changing the font weight or color slightly to indicate interactiveness */
.neutral-link:hover {
    font-weight: bold;
}
</style> 


{% endblock %}