{% extends "base.html" %}

{% block title %}{{ site.site_name }} - Site Details{% endblock %}

{% block head_extra %}
<style>
    .page-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 32px;
        gap: 24px;
    }

    .page-header-content {
        flex: 1;
    }

    .page-header-actions {
        display: flex;
        gap: 12px;
        flex-shrink: 0;
    }

    .breadcrumb {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;
        list-style: none;
        padding: 0;
    }

    .breadcrumb-item {
        color: var(--md-on-surface-variant);
        font: var(--md-typescale-body-medium);
    }

    .breadcrumb-item a {
        color: var(--md-primary);
        text-decoration: none;
    }

    .breadcrumb-item a:hover {
        text-decoration: underline;
    }

    .breadcrumb-item:not(:last-child)::after {
        content: "/";
        margin-left: 8px;
        color: var(--md-on-surface-variant);
    }

    /* Overview cards grid */
    .overview-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 24px;
        margin-bottom: 32px;
    }

    .info-card {
        background: var(--md-surface);
        border: 1px solid var(--md-outline-variant);
        border-radius: var(--md-shape-corner-medium);
        overflow: hidden;
    }

    .info-card-header {
        background: var(--md-surface-container);
        padding: 20px 24px;
        border-bottom: 1px solid var(--md-outline-variant);
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .info-card-header h3 {
        margin: 0;
        font: var(--md-typescale-title-medium);
        color: var(--md-on-surface);
        font-weight: 500;
    }

    .info-card-content {
        padding: 24px;
    }

    .info-row {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 12px 0;
        border-bottom: 1px solid var(--md-outline-variant);
        gap: 16px;
    }

    .info-row:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .info-row:first-child {
        padding-top: 0;
    }

    .info-label {
        font: var(--md-typescale-body-medium);
        color: var(--md-on-surface-variant);
        font-weight: 500;
        min-width: 120px;
        flex-shrink: 0;
    }

    .info-value {
        font: var(--md-typescale-body-medium);
        color: var(--md-on-surface);
        text-align: right;
        flex: 1;
    }

    .site-code {
        font-family: 'Courier New', monospace;
        background: var(--md-surface-container);
        padding: 4px 8px;
        border-radius: var(--md-shape-corner-small);
        font-weight: 500;
    }

    /* Devices section */
    .devices-section {
        background: var(--md-surface);
        border: 1px solid var(--md-outline-variant);
        border-radius: var(--md-shape-corner-medium);
        overflow: hidden;
    }

    .devices-section-header {
        background: var(--md-surface-container);
        padding: 20px 24px;
        border-bottom: 1px solid var(--md-outline-variant);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .devices-section-header h2 {
        margin: 0;
        font: var(--md-typescale-title-large);
        color: var(--md-on-surface);
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .devices-table {
        width: 100%;
        border-collapse: collapse;
    }

    .devices-table thead {
        background: var(--md-surface-container-low);
    }

    .devices-table th {
        padding: 12px 16px;
        text-align: left;
        font: var(--md-typescale-label-large);
        color: var(--md-on-surface-variant);
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .devices-table td {
        padding: 16px;
        border-bottom: 1px solid var(--md-outline-variant);
        font: var(--md-typescale-body-medium);
    }

    .devices-table tbody tr:last-child td {
        border-bottom: none;
    }

    .devices-table tbody tr:hover {
        background: var(--md-surface-container-low);
    }

    .device-link {
        color: var(--md-primary);
        text-decoration: none;
        font-weight: 500;
    }

    .device-link:hover {
        text-decoration: underline;
    }

    .status-indicator {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 8px;
    }

    .status-online { background-color: var(--md-success); }
    .status-partial { background-color: var(--md-warning); }
    .status-offline { background-color: var(--md-error); }

    .badge {
        padding: 4px 8px;
        border-radius: var(--md-shape-corner-small);
        font: var(--md-typescale-label-small);
        font-weight: 500;
    }

    .badge-stack {
        background: var(--md-primary-container);
        color: var(--md-on-primary-container);
    }

    .badge-infrastructure {
        background: var(--md-tertiary-container);
        color: var(--md-on-tertiary-container);
    }

    .empty-state {
        text-align: center;
        padding: 48px 24px;
        color: var(--md-on-surface-variant);
    }

    @media (max-width: 768px) {
        .page-header {
            flex-direction: column;
            align-items: stretch;
        }

        .overview-grid {
            grid-template-columns: 1fr;
        }

        .devices-table {
            font-size: 14px;
        }

        .devices-table th,
        .devices-table td {
            padding: 12px 8px;
        }
    }

    .note-type-site {
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
}
.note-type-device {
    background: var(--md-secondary-container);
    color: var(--md-on-secondary-container);
}
.note-type-general {
    background: var(--md-surface-container-highest);
    color: var(--md-on-surface);
}
.note-type-kb {
    background: var(--md-tertiary-container);
    color: var(--md-on-tertiary-container);
}
</style>
{% endblock %}

{% block content %}
<!-- Header -->
<div class="page-header">
    <div class="page-header-content">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ url_for('sites.index') }}">Sites</a></li>
                <li class="breadcrumb-item">{{ site.code }}</li>
            </ol>
        </nav>
        <h1 class="md-headline-large" style="margin: 0;">
            {{ site.site_name }}
        </h1>
        {% if site.description %}
        <p class="md-body-large" style="color: var(--md-on-surface-variant); margin-top: 8px;">
            {{ site.description }}
        </p>
        {% endif %}
    </div>

    <div class="page-header-actions">
        <a href="{{ url_for('sites.edit', code=site.code) }}" class="md-button md-button-filled">
            <i data-lucide="edit" size="16"></i>
            Edit Site
        </a>
        {% if site.total_devices == 0 %}
        <button class="md-button md-button-outlined"
                onclick="document.getElementById('deleteModal').classList.add('open')"
                style="color: var(--md-error); border-color: var(--md-error);">
            <i data-lucide="trash-2" size="16"></i>
            Delete
        </button>
        {% endif %}
    </div>
</div>

<!-- Site Overview Cards -->
<div class="overview-grid">
    <div class="info-card">
        <div class="info-card-header">
            <i data-lucide="info" size="20"></i>
            <h3>Site Information</h3>
        </div>
        <div class="info-card-content">
            <div class="info-row">
                <span class="info-label">Site Code:</span>
                <span class="info-value"><span class="site-code">{{ site.code }}</span></span>
            </div>
            <div class="info-row">
                <span class="info-label">Site Name:</span>
                <span class="info-value">{{ site.site_name }}</span>
            </div>
            {% if site.description %}
            <div class="info-row">
                <span class="info-label">Description:</span>
                <span class="info-value">{{ site.description }}</span>
            </div>
            {% endif %}
        </div>
    </div>

    <div class="info-card">
        <div class="info-card-header">
            <i data-lucide="server" size="20"></i>
            <h3>Device Statistics</h3>
        </div>
        <div class="info-card-content">
            <div class="info-row">
                <span class="info-label">Total Devices:</span>
                <span class="info-value"><strong>{{ site.total_devices or 0 }}</strong></span>
            </div>
            <div class="info-row">
                <span class="info-label">Infrastructure:</span>
                <span class="info-value">{{ site.infrastructure_devices or 0 }}</span>
            </div>
            <div class="info-row">
                <span class="info-label">Stacked:</span>
                <span class="info-value">{{ site.stacked_devices or 0 }}</span>
            </div>
            <div class="info-row">
                <span class="info-label">With Serials:</span>
                <span class="info-value">{{ site.devices_with_serials or 0 }}</span>
            </div>
        </div>
    </div>

    <div class="info-card">
        <div class="info-card-header">
            <i data-lucide="factory" size="20"></i>
            <h3>Vendor Information</h3>
        </div>
        <div class="info-card-content">
            <div class="info-row">
                <span class="info-label">Vendor Count:</span>
                <span class="info-value">{{ site.vendor_count or 0 }}</span>
            </div>
            {% if site.vendors %}
            <div class="info-row">
                <span class="info-label">Vendors:</span>
                <span class="info-value" style="text-align: right; line-height: 1.5;">
                    {{ site.vendors }}
                </span>
            </div>
            {% endif %}
            <div class="info-row">
                <span class="info-label">Last Update:</span>
                <span class="info-value">
                    {% if site.last_device_update %}
                    {{ site.last_device_update[:19] }}
                    {% else %}
                    Never
                    {% endif %}
                </span>
            </div>
        </div>
    </div>
</div>
<!-- Site Notes Section -->
<div class="devices-section" style="margin-top: 24px;">
    <div class="devices-section-header">
        <h2>
            <i data-lucide="file-text" size="24"></i>
            Site Notes
        </h2>
        <a href="{{ url_for('notes.create', site_code=site.code) }}" class="md-button md-button-filled">
            <i data-lucide="plus" size="16"></i>
            Add Note
        </a>
    </div>

    {% if site_notes %}
    <div style="padding: 24px; display: grid; gap: 16px;">
        {% for note in site_notes %}
        <div style="background: var(--md-surface-container-low); border: 1px solid var(--md-outline-variant); border-radius: var(--md-shape-corner-medium); padding: 20px; cursor: pointer; transition: all 0.2s;"
             onclick="window.location='{{ url_for('notes.detail', note_id=note.id) }}'"
             onmouseenter="this.style.borderColor='var(--md-outline)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'"
             onmouseleave="this.style.borderColor='var(--md-outline-variant)'; this.style.boxShadow='none'">
            <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px;">
                <h4 style="margin: 0; font: var(--md-typescale-title-small); color: var(--md-primary);">
                    {{ note.title }}
                </h4>
                <span class="badge note-type-{{ note.note_type }}" style="padding: 4px 8px; border-radius: var(--md-shape-corner-small); font: var(--md-typescale-label-small); font-weight: 500;">
                    {{ note.note_type|title }}
                </span>
            </div>
            <div style="font: var(--md-typescale-body-medium); color: var(--md-on-surface-variant); margin-bottom: 12px;">
                {{ note.content|striptags|truncate(200) }}
            </div>
            <div style="display: flex; justify-content: space-between; align-items: center; font: var(--md-typescale-body-small); color: var(--md-on-surface-variant);">
                <span>Updated: {{ note.updated_at[:19] }}</span>
                {% if note.tags %}
                <div style="display: flex; gap: 4px;">
                    {% set tags = note.tags|from_json %}
                    {% for tag in tags[:2] %}
                    <span style="background: var(--md-surface-container-high); padding: 2px 8px; border-radius: 12px; font-size: 10px;">
                        {{ tag }}
                    </span>
                    {% endfor %}
                </div>
                {% endif %}
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="empty-state">
        <div style="margin-bottom: 16px;">
            <i data-lucide="file-text" size="48"></i>
        </div>
        <h3>No notes for this site</h3>
        <p>Add notes to document site information, configurations, or procedures</p>
        <a href="{{ url_for('notes.create', site_code=site.code) }}" class="md-button md-button-filled" style="margin-top: 16px;">
            <i data-lucide="plus" size="16"></i>
            Create First Note
        </a>
    </div>
    {% endif %}
</div>
<!-- Devices at This Site -->
<div class="devices-section">
    <div class="devices-section-header">
        <h2>
            <i data-lucide="server" size="24"></i>
            Devices at This Site
        </h2>
        {% if devices %}
        <a href="{{ url_for('assets.devices') }}?site={{ site.code }}" class="md-button md-button-text">
            <i data-lucide="external-link" size="16"></i>
            View in Device List
        </a>
        {% endif %}
    </div>

    {% if devices %}
    <table class="devices-table">
        <thead>
            <tr>
                <th>Status</th>
                <th>Device</th>
                <th>Vendor</th>
                <th>Model</th>
                <th>Role</th>
                <th>Captures</th>
                <th style="text-align: right;">Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for device in devices %}
            <tr>
                <td>
                    {% if device.current_captures > 0 and device.last_fingerprint_success %}
                    <span class="status-indicator status-online" title="Online"></span>
                    {% elif device.current_captures > 0 or device.last_fingerprint_success %}
                    <span class="status-indicator status-partial" title="Partial"></span>
                    {% else %}
                    <span class="status-indicator status-offline" title="Offline"></span>
                    {% endif %}
                </td>
                <td>
                    <a href="{{ url_for('assets.device_detail', device_id=device.id) }}" class="device-link">
                        {{ device.name }}
                    </a>
                    {% if device.is_stack %}
                    <span class="badge badge-stack" style="margin-left: 8px;">Stack</span>
                    {% endif %}
                    {% if device.is_infrastructure %}
                    <span class="badge badge-infrastructure" style="margin-left: 8px;">Infra</span>
                    {% endif %}
                </td>
                <td>{{ device.vendor_name or '-' }}</td>
                <td>{{ device.model or '-' }}</td>
                <td>{{ device.role_name or '-' }}</td>
                <td>
                    {% if device.current_captures > 0 %}
                    <strong>{{ device.current_captures }}</strong> / {{ device.capture_types or 0 }} types
                    {% else %}
                    <span style="color: var(--md-on-surface-variant);">0</span>
                    {% endif %}
                </td>
                <td style="text-align: right;">
                    <a href="{{ url_for('assets.device_detail', device_id=device.id) }}"
                       class="md-icon-button" title="View Details">
                        <i data-lucide="eye" size="16"></i>
                    </a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% else %}
    <div class="empty-state">
        <div style="margin-bottom: 16px;">
            <i data-lucide="server" size="48"></i>
        </div>
        <h3>No devices at this site</h3>
        <p>Assign devices to this site to see them here</p>
    </div>
    {% endif %}
</div>


<!-- Delete Confirmation Modal -->
{% if site.total_devices == 0 %}
<div class="md-modal" id="deleteModal">
    <div class="md-modal-content">
        <div class="md-modal-header">
            <h2 class="md-modal-title" style="color: var(--md-error);">
                <i data-lucide="alert-triangle" size="20"></i>
                Confirm Deletion
            </h2>
            <button class="md-icon-button" onclick="document.getElementById('deleteModal').classList.remove('open')">
                <i data-lucide="x" size="20"></i>
            </button>
        </div>
        <div class="md-modal-body">
            <p class="md-body-large">Delete site "<strong>{{ site.site_name }}</strong>" ({{ site.code }})?</p>
            <p class="md-body-medium" style="margin-top: 16px; color: var(--md-error);">
                This action cannot be undone.
            </p>
        </div>
        <div class="md-modal-footer">
            <button class="md-button md-button-text"
                    onclick="document.getElementById('deleteModal').classList.remove('open')">
                Cancel
            </button>
            <form method="POST" action="{{ url_for('sites.delete', code=site.code) }}" style="display: inline;">
                <button type="submit" class="md-button md-button-filled"
                        style="background: var(--md-error); color: var(--md-on-error);">
                    <i data-lucide="trash-2" size="16"></i>
                    Delete Site
                </button>
            </form>
        </div>
    </div>
</div>
{% endif %}

<script>
document.getElementById('deleteModal')?.addEventListener('click', function(e) {
    if (e.target === this) {
        this.classList.remove('open');
    }
});

document.addEventListener('DOMContentLoaded', function() {
    lucide.createIcons();
});
</script>
{% endblock %}