{% load i18n %}

<table class="table table-striped table-bordered table-hover">
    <tbody>
        {% if voucher.voucher_set %}
            <tr>
                <th>
                    {% trans "Voucher set" %}
                </th>
                <td>
                    <a href="{% url 'dashboard:voucher-set-detail' pk=voucher.voucher_set.pk %}">
                        {{ voucher.voucher_set.name }}
                    </a>
                </td>
            </tr>
        {% endif %}
        <tr>
            <th>{% trans "Name" %}</th>
            <td colspan="2">{{ voucher.name }}</td>
        </tr>
        <tr>
            <th>{% trans "Code" %}</th>
            <td colspan="2">{{ voucher.code }}</td>
        </tr>
        <tr>
            <th>{% trans "Start datetime" %}</th>
            <td colspan="2">{{ voucher.start_datetime }}</td>
        </tr>
        <tr>
            <th>{% trans "End datetime" %}</th>
            <td colspan="2">{{ voucher.end_datetime }}</td>
        </tr>
        <tr>
            <th>{% trans "Usage" %}</th>
            <td colspan="2">{{ voucher.get_usage_display }}</td>
        </tr>
        <tr>
            <th>{% trans "Number of offers" %}</th>
            <td colspan="2">{{ voucher.offers.count }}</td>
        </tr>
        <tr>
            <th>{% trans "Num child codes" %}</th>
            <td>{{ children_count }}</td>
            <td>
                <div class="btn-toolbar">
                    <div class="dropdown">
                        <button
                            class="btn btn-secondary dropdown-toggle"
                            type="button"
                            id="dropdownMenuButton"
                            data-toggle="dropdown"
                            aria-haspopup="true"
                            aria-expanded="false"
                        >
                            {% trans "Actions" %}
                        </button>
                        <div
                            class="dropdown-menu dropdown-menu-right"
                            aria-labelledby="dropdownMenuButton"
                        >
                            <a
                                class="dropdown-item"
                                href="{% url 'dashboard:voucher-add-children' pk=voucher.id %}"
                            >
                                {% trans "Add more child codes" %}
                            </a>
                            <a
                                class="dropdown-item"
                                href="{% url 'dashboard:voucher-list-children' parent_pk=voucher.id %}"
                            >
                                {% trans "View child codes" %}
                            </a>
                            <a
                                 class="dropdown-item"
                                 href="{% url 'dashboard:voucher-export-children' pk=voucher.id %}"
                            >
                                {% trans "Export child codes" %}
                            </a>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <th>{% trans "Usage is limited to specific user groups?" %}</th>
            <td colspan="2">
                {% if voucher.limit_usage_by_group %}
                    <span class="badge badge-success">{% trans "Yes" %}</span>
                {% else %}
                    <span class="badge badge-danger">{% trans "No" %}</span>
                {% endif %}
            </td>
        </tr>
        {% if voucher.limit_usage_by_group %}
            <tr>
                <th>{% trans "Whitelisted User Groups" %}</th>
                <td colspan="2">
                    {% for group in voucher.groups.all %}
                        <span class="badge badge-info">{{ group.name }}</span>
                    {% endfor %}
                </td>
            </tr>
        {% endif %}
        <tr>
            <th>{% trans "Offer Group" %}</th>
            <td colspan="2">{{ voucher.offer_group.name|default:"-" }}</td>
        </tr>
    </tbody>
</table>