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

{% block title %}Credits Dashboard{% endblock %}

{% block content %}
<div class="container">
    <div class="columns">
        <div class="column is-12">
            <h1 class="title">Credits Dashboard</h1>
            
            <!-- Current Balance Section -->
            <div class="box">
                <div class="level">
                    <div class="level-left">
                        <div class="level-item">
                            <div>
                                <p class="heading">Current Balance</p>
                                <p class="title is-3" id="credit-balance">{{ current_balance }} credits</p>
                            </div>
                        </div>
                    </div>
                    <div class="level-right">
                        <div class="level-item">
                            <a href="{% url 'credits:dashboard' %}" class="button is-primary">
                                <span class="icon">
                                    <i class="fas fa-sync-alt"></i>
                                </span>
                                <span>Refresh</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Recent Transactions Section -->
            <div class="box">
                <h2 class="subtitle">Recent Transactions</h2>
                
                {% if recent_transactions %}
                    <div class="table-container">
                        <table class="table is-fullwidth is-striped">
                            <thead>
                                <tr>
                                    <th>Date</th>
                                    <th>Amount</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for transaction in recent_transactions %}
                                <tr>
                                    <td>{{ transaction.created_at|date:"M d, Y g:i A" }}</td>
                                    <td>
                                        <span class="tag {% if transaction.amount >= 0 %}is-success{% else %}is-danger{% endif %}">
                                            {% if transaction.amount >= 0 %}+{% endif %}{{ transaction.amount }} credits
                                        </span>
                                    </td>
                                    <td>{{ transaction.description }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <div class="notification is-info is-light">
                        <p><strong>No transactions yet!</strong></p>
                        <p>Your credit transactions will appear here once you start using credits.</p>
                    </div>
                {% endif %}
            </div>

            <!-- Quick Actions Section -->
            <div class="box">
                <h2 class="subtitle">Quick Actions</h2>
                <div class="buttons">
                    <a href="{% url 'credits:services' %}" class="button is-success">
                        <span class="icon">
                            <i class="fas fa-cogs"></i>
                        </span>
                        <span>Use Services</span>
                    </a>
                    <button class="button is-info" disabled>
                        <span class="icon">
                            <i class="fas fa-shopping-cart"></i>
                        </span>
                        <span>Buy Credits (Coming Soon)</span>
                    </button>
                    <button class="button is-warning" disabled>
                        <span class="icon">
                            <i class="fas fa-star"></i>
                        </span>
                        <span>Subscribe (Coming Soon)</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}