{% extends "base.html" %}

{% block title %}History{% endblock %}

{% block content %}
<div class="container" style="padding-top: 24px;">
    <div class="dashboard-header">
        <div>
            <h1 class="dashboard-title">📚 Operation History</h1>
            <p style="color: var(--text-muted); margin-top: 4px;">Complete audit trail of all data operations</p>
        </div>
    </div>

    {% if history %}
    <div class="glass-card">
        <div class="data-table-container">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Time</th>
                        <th>Dataset</th>
                        <th>Action</th>
                        <th>Details</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in history | reverse %}
                    <tr>
                        <td>{{ item.timestamp[:19] }}</td>
                        <td><strong>{{ item.dataset_name }}</strong></td>
                        <td>
                            <span class="badge badge-{{ 'primary' if item.action == 'Upload' else 'success' if item.action == 'AutoML' else 'info' if item.action == 'Data Operation' else 'warning' }}">
                                {{ item.action }}
                            </span>
                        </td>
                        <td>{{ item.details }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% else %}
    <div class="no-data">
        <div class="no-data-icon">📚</div>
        <div class="no-data-title">No History Yet</div>
        <p class="no-data-desc">Your operation history will appear here once you start using the platform.</p>
        <a href="/upload" class="btn-liquid"><i class="fas fa-cloud-upload-alt"></i> Get Started</a>
    </div>
    {% endif %}
</div>
{% endblock %}