<div class="table-responsive">
    <table class="table table-dark table-hover align-middle custom-table">
        <thead>
            <tr>
                <th class="text-muted fw-normal">MP</th>
                <th class="text-muted fw-normal">Ticker</th>
                <th class="text-muted fw-normal">Type</th>
                <th class="text-muted fw-normal">Amount</th>
                <th class="text-muted fw-normal">Date</th>
                <th class="text-end"></th>
            </tr>
        </thead>
        <tbody id="trade-feed-body">
            {% for trade in trades %}
            <tr>
                <td>
                    <a href="{% url 'mp_detail' trade.mp.pk %}" class="text-decoration-none text-white d-flex align-items-center">
                        <div class="avatar me-3">{{ trade.mp.name|slice:":1" }}</div>
                        <div>
                            <div class="fw-bold">{{ trade.mp.name }}</div>
                            <div class="small text-muted">{{ trade.mp.party }}</div>
                        </div>
                    </a>
                </td>
                <td>
                    <a href="{% url 'ticker_detail' trade.ticker %}" class="text-decoration-none text-white">
                        <div class="fw-bold">{{ trade.ticker }}</div>
                        <div class="small text-muted">{{ trade.company_name }}</div>
                    </a>
                </td>
                <td>
                    {% if trade.trade_type == 'BUY' %}
                        <span class="badge bg-success-subtle text-success border border-success px-3 py-2">BUY</span>
                    {% else %}
                        <span class="badge bg-danger-subtle text-danger border border-danger px-3 py-2">SELL</span>
                    {% endif %}
                </td>
                <td>{{ trade.amount_range }}</td>
                <td>{{ trade.disclosure_date|date:"M d, Y" }}</td>
                <td class="text-end">
                    <button class="btn {% if trade.mp.id in followed_mps %}btn-success{% else %}btn-outline-light{% endif %} btn-sm rounded-pill px-3 follow-btn" 
                            data-mp-id="{{ trade.mp.id }}">
                        {% if trade.mp.id in followed_mps %}Following{% else %}Follow{% endif %}
                    </button>
                </td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="6" class="text-center py-5 text-muted">No disclosures found for this filter.</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<script>
// Re-attach listeners after partial load if needed, or use delegation in the main file
</script>