{% extends "base.html" %}
{% block title %}{{ server.hostname or server.ip_address }} Updates - Update Manager{% endblock %}

{% block content %}
<div class="page-header">
    <h1 class="icon" id="update_manager">{{ server.hostname or server.ip_address }}</h1>
    <p class="subtitle">Package updates and history</p>
    <div class="header-actions">
        <a href="{{ url_for('update_manager.index') }}" class="btn btn-secondary">← Back</a>
        <form action="{{ url_for('update_manager.check_updates', server_id=server.id) }}" method="POST" style="display: inline;">
            <button type="submit" class="btn btn-primary">🔄 Check for Updates</button>
        </form>
    </div>
</div>

{% if snapshot %}
<div class="stats-grid">
    <div class="stat-card">
        <div class="stat-label">Total Updates</div>
        <div class="stat-value {% if snapshot.total_updates > 0 %}text-warning{% endif %}">
            {{ snapshot.total_updates }}
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-label">Security Updates</div>
        <div class="stat-value {% if snapshot.security_updates > 0 %}text-danger{% endif %}">
            {{ snapshot.security_updates }}
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-label">Package Manager</div>
        <div class="stat-value"><code>{{ snapshot.package_manager }}</code></div>
    </div>
    <div class="stat-card">
        <div class="stat-label">Last Checked</div>
        <div class="stat-value" style="font-size: 1rem;">{{ snapshot.checked_at.strftime('%Y-%m-%d %H:%M') }}</div>
    </div>
</div>

{% if snapshot.total_updates > 0 %}
<div class="card">
    <div class="card-header">
        <h2>Available Updates</h2>
        <div class="header-actions">
            <form action="{{ url_for('update_manager.perform_update', server_id=server.id) }}" method="POST" style="display: inline;">
                <input type="hidden" name="dry_run" value="true">
                <button type="submit" class="btn btn-secondary">🧪 Dry Run</button>
            </form>
            <form action="{{ url_for('update_manager.perform_update', server_id=server.id) }}" method="POST" style="display: inline;" 
                  onsubmit="return confirm('Are you sure you want to update all packages on this server?')">
                <button type="submit" class="btn btn-warning">⬆️ Update All</button>
            </form>
        </div>
    </div>
    <div class="card-body">
        <table class="table">
            <thead>
                <tr>
                    <th>Package</th>
                    <th>Current Version</th>
                    <th>New Version</th>
                    <th>Type</th>
                </tr>
            </thead>
            <tbody>
                {% for pkg in snapshot.packages %}
                <tr>
                    <td><strong>{{ pkg.name }}</strong></td>
                    <td><code>{{ pkg.current_version or '-' }}</code></td>
                    <td><code>{{ pkg.new_version }}</code></td>
                    <td>
                        {% if pkg.security %}
                        <span class="badge badge-critical">Security</span>
                        {% else %}
                        <span class="badge badge-info">Regular</span>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% else %}
<div class="card">
    <div class="card-body">
        <div class="empty-state">
            <p>✅ All packages are up to date!</p>
        </div>
    </div>
</div>
{% endif %}

{% else %}
<div class="card">
    <div class="card-body">
        <div class="empty-state">
            <p>No update information available yet.</p>
            <form action="{{ url_for('update_manager.check_updates', server_id=server.id) }}" method="POST">
                <button type="submit" class="btn btn-primary">Check for Updates Now</button>
            </form>
        </div>
    </div>
</div>
{% endif %}

{% if history %}
<div class="card">
    <div class="card-header">
        <h2>Operation History</h2>
    </div>
    <div class="card-body">
        <table class="table">
            <thead>
                <tr>
                    <th>Operation</th>
                    <th>Status</th>
                    <th>Started</th>
                    <th>Initiated By</th>
                    <th>Details</th>
                </tr>
            </thead>
            <tbody>
                {% for h in history %}
                <tr>
                    <td>
                        {% if h.operation == 'check' %}
                        🔍 Check
                        {% elif h.operation == 'dry_run' %}
                        🧪 Dry Run
                        {% elif h.operation == 'update' %}
                        ⬆️ Update
                        {% elif h.operation == 'refresh' %}
                        🔄 Refresh
                        {% else %}
                        {{ h.operation }}
                        {% endif %}
                    </td>
                    <td>
                        {% if h.status == 'success' %}
                        <span class="badge badge-success">Success</span>
                        {% elif h.status == 'failed' %}
                        <span class="badge badge-danger">Failed</span>
                        {% elif h.status == 'running' %}
                        <span class="badge badge-warning">Running</span>
                        {% else %}
                        <span class="badge badge-secondary">{{ h.status }}</span>
                        {% endif %}
                    </td>
                    <td>{{ h.started_at.strftime('%Y-%m-%d %H:%M') }}</td>
                    <td>{{ h.initiated_by or '-' }}</td>
                    <td>
                        {% if h.packages_updated %}
                        {{ h.packages_updated }} packages
                        {% endif %}
                        {% if h.output or h.error_message %}
                        <a href="{{ url_for('update_manager.view_history', history_id=h.id) }}" class="btn btn-sm btn-secondary">View Log</a>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endif %}

<style>
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background: var(--bg-secondary);
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
}

.stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
}

.text-warning {
    color: var(--warning) !important;
}

.text-danger {
    color: var(--danger) !important;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.card-header .header-actions {
    display: flex;
    gap: 0.5rem;
}
</style>
{% endblock %}