{% if display_dashboard_panel %}
<script>
    $(document).ready(function() {
        let rows = $('#expiration-list tr');
        rows.each(function(index) {
            if (index > 5) {
                $(this).attr('hidden', true);
            }
        });
    });

    function show_more() {
        let $rows = $('#expiration-list tr');
        $rows.removeAttr('hidden');

        $('#fill-info-less').show();
        $('#fill-info-more').hide()
    }

    function show_less() {
        let $rows = $('#expiration-list tr');
        $rows.slice(6).attr('hidden', true);
        $('#fill-info-less').hide();
        $('#fill-info-more').show()
    }
</script>

<table class="table table-condensed table-bordered">
    <caption style="font-weight: bold; font-size: 14pt;">Canisters Nearing Expiration</caption>
    <thead>
    <tr style="background-color: lightblue;">
        <th>Serial Number</th>
        <th>Drug Number</th>
        <th>Drug Name</th>
        <th>Use By Date</th>
        <th>Location</th>
        <th>Quantity</th>
        <th>Pill Demand</th>
    </tr>
    </thead>
    <tbody id="expiration-list">
    {% for canister in expiration_list %}
    <tr>
        <td><a href="{% url 'site:canister-detail-info' canister.id %}" title="Details">{{ canister.serial_number }}</a></td>
        <td>{{ canister.drug_number }}</td>
        <td>{{ canister.drug_name }}</td>
        <td {% if canister.use_by == 'Expired' %}style="color: red; font-weight: bold;"{% endif %}>{{ canister.use_by }}</td>
        <td>{{ canister.location }}</td>
        <td>{{ canister.quantity }}</td>
        <td>{{ canister.pill_demand }}</td>
    </tr>
    {% endfor %}
    </tbody>
</table>
{% if expiration_list|length > 6 %}
<button id="fill-info-more" type="button" class="btn btn-link" onclick="show_more()">Show More</button>
<button id="fill-info-less" type="button" class="btn btn-link" style="display: none" onclick="show_less()">Show Less</button>
{% endif %}
{% endif %}