{% load wagtailcore_tags wagtailimages_tags lazyimages_tags static %}

<div class="results-view">
    <div class="results-header">
        <h5 class="results-count results">
            {{alerts}}
            Showing {{ alerts.paginator.count }} result{{ alerts.paginator.count|pluralize }}
        </h5>
        <div>
            <button id="list-view-button" class="product-filter view active" name="view" value="list">
                <i class="fas fa-th-list"></i>
            </button>
            <button id="grid-view-button" class="product-filter view" name="view" value="grid">
                <i class="fas fa-grip-horizontal"></i>
            </button>
        </div>
    </div>
    <div class="results-list list-view">
        {% for alert in alerts %}
            <div class="result-list-item">
                <div class="result-list-item-wrapper">
                    <a href="{{ alert.url }}" class="result-list-item-image">
                        <figure class="image">
                                <img class="progressive__img progressive--not-loaded"
                                     style="object-fit: cover" />
                        </figure>
                    </a>
                    <div class="result-list-item-detail">
                        <a href="{{ alert.url }}" class="result-list-item-title">
                            <h5>
                                {{ alert.title }}
                            </h5>
                        </a>

                        {% for info in alert.alert_info.all %}
                        {% if info.is_expired %}
          
                            <p class="result-list-item-more read">Note: <b>Expired</b></p>
                        {% endif %}
                        <p class="result-list-item-more read">
                            {{info.get_severity_display}}
                        </p>
                            {% for alert_area in info.alert_areas.values%}
                            <span class="tag is-dark"> <i class="fa fa-location-pin pr-1"> </i> {{alert_area.areaDesc}}</span>
                            {% endfor %}
                    
                    
                        {% endfor %}
                       
                        <div class="result-list-item-meta">
                            {% comment %} <span class="">{{ product.month|month_name }} {{ product.year }}</span> {% endcomment %}
                            <a class="result-list-item-more read" href="{{ alert.url }}">
                                Read More
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
    {% include 'capeditor/pagination_include.html' with items=alerts %}
</div>


