{% extends "base.html" %}

{% block title %}{{ 'Edit' if site else 'Create' }} Site{% endblock %}

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

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

    .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);
    }

    /* Form sections */
    .form-section {
        background: var(--md-surface);
        border: 1px solid var(--md-outline-variant);
        border-radius: var(--md-shape-corner-medium);
        overflow: hidden;
        max-width: 800px;
    }

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

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

    .form-section-content {
        padding: 24px;
    }

    /* Form fields using MD3 text field styles */
    .md-form-field {
        margin-bottom: 24px;
    }

    .md-form-field:last-child {
        margin-bottom: 0;
    }

    .md-form-label {
        display: block;
        font: var(--md-typescale-body-medium);
        color: var(--md-on-surface);
        font-weight: 500;
        margin-bottom: 8px;
    }

    .required-indicator {
        color: var(--md-error);
        margin-left: 4px;
    }

    .md-form-input,
    .md-form-textarea {
        width: 100%;
        padding: 14px 16px;
        font: var(--md-typescale-body-large);
        background: var(--md-surface);
        border: 1px solid var(--md-outline);
        border-radius: var(--md-shape-corner-small);
        color: var(--md-on-surface);
        transition: border-color var(--md-motion-duration-short4) var(--md-motion-easing-standard),
                    border-width var(--md-motion-duration-short4) var(--md-motion-easing-standard);
        outline: none;
        box-sizing: border-box;
    }

    .md-form-textarea {
        resize: vertical;
        font-family: inherit;
    }

    .md-form-input:focus,
    .md-form-textarea:focus {
        border-color: var(--md-primary);
        border-width: 2px;
        padding: 13px 15px;
    }

    .md-form-input:read-only {
        background: var(--md-surface-container-low);
        color: var(--md-on-surface-variant);
    }

    .md-form-input::placeholder {
        color: var(--md-on-surface-variant);
        opacity: 0.6;
    }

    .md-form-help {
        font: var(--md-typescale-body-small);
        color: var(--md-on-surface-variant);
        margin-top: 4px;
    }

    /* Action buttons section */
    .form-actions {
        background: var(--md-surface);
        border: 1px solid var(--md-outline-variant);
        border-radius: var(--md-shape-corner-medium);
        padding: 24px;
        margin-top: 24px;
        max-width: 800px;
    }

    .form-actions-buttons {
        display: flex;
        gap: 12px;
        justify-content: flex-end;
    }

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

        .form-actions-buttons {
            flex-direction: column;
        }
    }
</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">{{ 'Edit' if site else 'Create' }}</li>
            </ol>
        </nav>
        <h1 class="md-headline-large" style="margin: 0;">
            {% if site %}Edit Site{% else %}Create Site{% endif %}
        </h1>
    </div>
</div>

<!-- Form -->
<form method="POST">
    <div class="form-section">
        <div class="form-section-header">
            <i data-lucide="building" size="20"></i>
            <h3>Site Information</h3>
        </div>
        <div class="form-section-content">
            <div class="md-form-field">
                <label class="md-form-label" for="code">
                    Site Code
                    <span class="required-indicator">*</span>
                </label>
                <input type="text"
                       class="md-form-input"
                       id="code"
                       name="code"
                       value="{{ site.code if site else (form_data.code if form_data else '') }}"
                       {% if site %}readonly{% endif %}
                       required
                       maxlength="10"
                       pattern="[A-Z0-9_-]+"
                       placeholder="e.g., NYC01, DC-WEST">
                <div class="md-form-help">
                    Unique identifier (uppercase letters, numbers, hyphens, underscores)
                    {% if site %}<br><strong>Note:</strong> Code cannot be changed after creation{% endif %}
                </div>
            </div>

            <div class="md-form-field">
                <label class="md-form-label" for="name">
                    Site Name
                    <span class="required-indicator">*</span>
                </label>
                <input type="text"
                       class="md-form-input"
                       id="name"
                       name="name"
                       value="{{ site.name if site else (form_data.name if form_data else '') }}"
                       required
                       placeholder="e.g., New York Office, West Coast Data Center">
                <div class="md-form-help">
                    Human-readable site name
                </div>
            </div>

            <div class="md-form-field">
                <label class="md-form-label" for="description">Description</label>
                <textarea class="md-form-textarea"
                          id="description"
                          name="description"
                          rows="3"
                          placeholder="Optional site description (location, purpose, etc.)">{{ site.description if site else (form_data.description if form_data else '') }}</textarea>
                <div class="md-form-help">
                    Additional details about this site (optional)
                </div>
            </div>
        </div>
    </div>

    <!-- Action Buttons -->
    <div class="form-actions">
        <div class="form-actions-buttons">
            <a href="{{ url_for('sites.index') }}" class="md-button md-button-outlined">
                <i data-lucide="x" size="16"></i>
                Cancel&nbsp;&nbsp;
            </a>
            <button type="submit" class="md-button md-button-filled">
                <i data-lucide="save" size="16"></i>
                {% if site %}Update Site{% else %}Create Site{% endif %}&nbsp;&nbsp;
            </button>
        </div>
    </div>
</form>

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

    const codeInput = document.getElementById('code');
    if (codeInput && !codeInput.readOnly) {
        codeInput.addEventListener('input', function() {
            this.value = this.value.toUpperCase();
        });
    }
});
</script>
{% endblock %}