{% extends 'base/base.html' %}
{% block title %}Trading Signals - CryptoSignals Pro{% endblock %}

{% block content %}
<div class="container-fluid">
    <h1 class="page-title">Trading Signals</h1>
    
    <!-- Filters -->
    <div class="card mb-4">
        <div class="card-body">
            <form method="get" class="row g-3">
                <div class="col-md-3">
                    <select name="status" class="form-select">
                        <option value="">All Status</option>
                        <option value="ACTIVE" {% if request.GET.status == 'ACTIVE' %}selected{% endif %}>Active</option>
                        <option value="COMPLETED" {% if request.GET.status == 'COMPLETED' %}selected{% endif %}>Completed</option>
                        <option value="CANCELLED" {% if request.GET.status == 'CANCELLED' %}selected{% endif %}>Cancelled</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <select name="type" class="form-select">
                        <option value="">All Types</option>
                        <option value="BUY" {% if request.GET.type == 'BUY' %}selected{% endif %}>Buy</option>
                        <option value="SELL" {% if request.GET.type == 'SELL' %}selected{% endif %}>Sell</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <button type="submit" class="btn btn-primary w-100">Filter</button>
                </div>
            </form>
        </div>
    </div>
    
    <!-- Signals Table -->
    <div class="card">
        <div class="card-body p-0">
            {% if page_obj %}
            <div class="table-responsive">
                <table class="table mb-0">
                    <thead>
                        <tr>
                            <th class="custom-text-muted">Coin</th>
                            <th class="custom-text-muted">Type</th>
                            <th class="custom-text-muted">Entry Price</th>
                            <th class="custom-text-muted">Target Price</th>
                            <th class="custom-text-muted">Stop Loss</th>
                            <th class="custom-text-muted">Status</th>
                            <th class="custom-text-muted">Created</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for signal in page_obj %}
                        <tr>
                            <td>
                                <strong class="custom-text-white">{{ signal.coin.name }}</strong>
                                <small class="d-block custom-text-muted">{{ signal.coin.symbol }}</small>
                            </td>
                            <td>
                                <span class="badge {% if signal.signal_type == 'BUY' %}badge-buy{% else %}badge-sell{% endif %}">
                                    {{ signal.get_signal_type_display }}
                                </span>
                            </td>
                            <td class="custom-text-white">${{ signal.entry_price|floatformat:2 }}</td>
                            <td class="custom-text-success">${{ signal.target_price|floatformat:2 }}</td>
                            <td class="custom-text-danger">${{ signal.stop_loss|floatformat:2 }}</td>
                            <td>
                                <span class="badge badge-{{ signal.status|lower }}">{{ signal.get_status_display }}</span>
                            </td>
                            <td class="custom-text-muted">{{ signal.created_at|date:"M d, Y" }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            
            <!-- Pagination -->
            {% if page_obj.has_other_pages %}
            <nav>
                <ul class="pagination justify-content-center mb-0">
                    {% if page_obj.has_previous %}
                    <li class="page-item"><a class="page-link" href="?page={{ page_obj.previous_page_number }}">Previous</a></li>
                    {% endif %}
                    <li class="page-item active"><span class="page-link">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span></li>
                    {% if page_obj.has_next %}
                    <li class="page-item"><a class="page-link" href="?page={{ page_obj.next_page_number }}">Next</a></li>
                    {% endif %}
                </ul>
            </nav>
            {% endif %}
            {% else %}
            <div class="text-center py-5">
                <i class="bi bi-lightning-charge" style="font-size: 4rem; color: #64748b;"></i>
                <h5 class="mt-3 custom-text-white">No Signals Available</h5>
                <p class="custom-text-muted">Trading signals will appear here.</p>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}
