{% extends 'dashboard.html' %}
{% load static %}

{% block head_title %}Coupons | {% endblock %}

{% block content %}
<article>
    <header class="object-header">
        <h1><img src="{% static 'images/coupon.png' %}"> Coupons</h1>
        <a href="{% url 'dashboard:coupon-create' %}" class="btn">+ New coupon</a>
    </header>
    <section class="panel">
        <header class="panel-header">
            <h4></h4>
        </header>
        <table>
            <thead>
                <th>Name</th>
                <th>Code</th>
                <th>Valid</th>
                <th>Starts</th>
                <th>Ends</th>
                <th>Value</th>
            </thead>
            <tbody>
            {% for coupon in coupon_list  %}
                <tr class="is-link" onclick="window.location='{% url 'dashboard:coupon-detail' coupon.pk %}'">
                    <td>{{ coupon.name }}</td>
                    <td>{{ coupon.code }}</td>
                    <td>
                        <div class="status-display">
                            {% if coupon.is_valid %}
                            <span class="status-dot status-success"></span> Valid
                            {% else %}
                            <span class="status-dot status-info"></span> Invalid
                            {% endif %}
                        </div>
                    </td>
                    <td>{{ coupon.valid_from|date:"SHORT_DATE_FORMAT" }}</td>
                    <td>{{ coupon.valid_to|date:"SHORT_DATE_FORMAT" }}</td>
                    <td>{{ coupon.discount_value }} {{ coupon.get_discount_value_type_display }}</td>
                </tr>
            {% empty %}
                <tr>
                    <td colspan="5">No coupons.</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </section>
</article>
{% endblock content %}
