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

{% block navbar_nav %}
<li class="nav-item active">
    <a class="nav-link" href="/shipping">Shipping</a>
</li>
{% endblock %}

{% block container %}
<div class="row mt-3">
    <div class="col">
        <h2>Shipping Info</h2>
        <p>Current tracking information from your email</p>
    </div>
</div>
<div class="row mt-2">
    <div class="col">
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">Tracking Number</th>
                    <th scope="col">Carrier</th>
                    <th scope="col">Status</th>
                    <th scope="col">Location</th>
                    <th scope="col">Subject</th>
                    <th scope="col">Disabled</th>
                </tr>
            </thead>
            <tbody>
                {% for row in trackers %}
                <tr>
                    <th scope="row">{{ row['id'] }}</th>
                    <td>
                        {% if row['metadata'].get('tracking_url') %}
                        <a href="{{ row['metadata'].get('tracking_url') }}">
                            {{ row['token'] }}
                        </a>
                        {% else %}
                        {{ row['token'] }}
                        {% endif %}
                    </td>
                    <td>{{ row['metadata']['carrier_name'] }}</td>
                    <td>{{ row['metadata'].get('events', [{}])[0].get('description', '') }}</td>
                    <td>{{ row['metadata'].get('events', [{}])[0].get('location', '') }}</td>
                    <td>{{ row['subject'] }}</td>
                    <td>{{ row['disabled'] }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}