{% extends "base.html" %}

{% block title %}{{ 'Edit' if vendor else 'Create' }} Vendor{% 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;
    }

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

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

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

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

        .form-actions-buttons {
            flex-direction: column;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="page-header">
    <div class="page-header-content">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ url_for('vendors.index') }}">Vendors</a></li>
                <li class="breadcrumb-item">{{ 'Edit' if vendor else 'Create' }}</li>
            </ol>
        </nav>
        <h1 class="md-headline-large" style="margin: 0;">
            {% if vendor %}Edit Vendor{% else %}Create Vendor{% endif %}
        </h1>
    </div>
</div>

<form method="POST" action="{{ url_for('vendors.edit', vendor_id=vendor.id) if vendor else url_for('vendors.create') }}">
    <div class="form-section">
        <div class="form-section-header">
            <i data-lucide="factory" size="20"></i>
            <h3>Vendor Information</h3>
        </div>
        <div class="form-section-content">
            <div class="md-form-field">
                <label class="md-form-label" for="name">
                    Vendor Name
                    <span class="required-indicator">*</span>
                </label>
                <input type="text"
                       class="md-form-input"
                       id="name"
                       name="name"
                       value="{{ vendor.name if vendor else (form_data.name if form_data else '') }}"
                       required
                       placeholder="e.g., Cisco Systems, Arista Networks, Juniper Networks">
                <div class="md-form-help">
                    Full manufacturer name
                </div>
            </div>

            <div class="md-form-field">
                <label class="md-form-label" for="short_name">Short Name</label>
                <input type="text"
                       class="md-form-input"
                       id="short_name"
                       name="short_name"
                       value="{{ vendor.short_name if vendor else (form_data.short_name if form_data else '') }}"
                       maxlength="20"
                       placeholder="e.g., Cisco, Arista, Juniper">
                <div class="md-form-help">
                    Abbreviated vendor name (optional, max 20 characters)
                </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 description or notes about this vendor">{{ vendor.description if vendor else (form_data.description if form_data else '') }}</textarea>
                <div class="md-form-help">
                    Additional information about this vendor (optional)
                </div>
            </div>
        </div>
    </div>

    <div class="form-actions">
        <div class="form-actions-buttons">
            <a href="{{ url_for('vendors.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 vendor %}Update Vendor&nbsp;&nbsp;{% else %}Create Vendor{% endif %}
            </button>
        </div>
    </div>
</form>

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