{% extends "base.html" %}
{% block title %}Operation Log - Update Manager{% endblock %}

{% block content %}
<div class="page-header">
    <h1 class="icon" id="update_manager">Operation Log</h1>
    <p class="subtitle">{{ history.operation|title }} on {{ server.hostname or server.ip_address }}</p>
    <div class="header-actions">
        <a href="{{ url_for('update_manager.server_detail', server_id=server.id) }}" class="btn btn-secondary">← Back to Server</a>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h2>Operation Details</h2>
    </div>
    <div class="card-body">
        <div class="info-grid">
            <div class="info-item">
                <span class="info-label">Operation:</span>
                <strong>
                    {% if history.operation == 'check' %}
                    🔍 Check for Updates
                    {% elif history.operation == 'dry_run' %}
                    🧪 Dry Run
                    {% elif history.operation == 'update' %}
                    ⬆️ Update Packages
                    {% elif history.operation == 'refresh' %}
                    🔄 Refresh Package Lists
                    {% else %}
                    {{ history.operation }}
                    {% endif %}
                </strong>
            </div>
            <div class="info-item">
                <span class="info-label">Status:</span>
                {% if history.status == 'success' %}
                <span class="badge badge-success">Success</span>
                {% elif history.status == 'failed' %}
                <span class="badge badge-danger">Failed</span>
                {% elif history.status == 'running' %}
                <span class="badge badge-warning">Running</span>
                {% else %}
                <span class="badge badge-secondary">{{ history.status }}</span>
                {% endif %}
            </div>
            <div class="info-item">
                <span class="info-label">Server:</span>
                <a href="{{ url_for('update_manager.server_detail', server_id=server.id) }}">
                    {{ server.hostname or server.ip_address }}
                </a>
            </div>
            <div class="info-item">
                <span class="info-label">Started:</span>
                <span>{{ history.started_at.strftime('%Y-%m-%d %H:%M:%S') }}</span>
            </div>
            {% if history.completed_at %}
            <div class="info-item">
                <span class="info-label">Completed:</span>
                <span>{{ history.completed_at.strftime('%Y-%m-%d %H:%M:%S') }}</span>
            </div>
            <div class="info-item">
                <span class="info-label">Duration:</span>
                <span>{{ (history.completed_at - history.started_at).total_seconds()|round(1) }} seconds</span>
            </div>
            {% endif %}
            <div class="info-item">
                <span class="info-label">Initiated By:</span>
                <span>{{ history.initiated_by or 'System' }}</span>
            </div>
            {% if history.packages_updated %}
            <div class="info-item">
                <span class="info-label">Packages Updated:</span>
                <strong>{{ history.packages_updated }}</strong>
            </div>
            {% endif %}
        </div>
    </div>
</div>

{% if history.error_message %}
<div class="card" style="border-left: 4px solid var(--danger);">
    <div class="card-header">
        <h2>Error</h2>
    </div>
    <div class="card-body">
        <pre class="log-output error">{{ history.error_message }}</pre>
    </div>
</div>
{% endif %}

{% if history.output %}
<div class="card">
    <div class="card-header">
        <h2>Output Log</h2>
    </div>
    <div class="card-body">
        <pre class="log-output">{{ history.output }}</pre>
    </div>
</div>
{% endif %}

<style>
.log-output {
    background: var(--bg-tertiary);
    padding: 1rem;
    border-radius: 4px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.85rem;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 500px;
    overflow-y: auto;
    margin: 0;
}

.log-output.error {
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid var(--danger);
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.info-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
}
</style>
{% endblock %}