Inventarsystem/Web/templates/manage_locations.html

<!--
   Copyright 2025-2026 AIIrondev

   Licensed under the Inventarsystem EULA (Endbenutzer-Lizenzvertrag).
   See Legal/LICENSE for the full license text.
   Unauthorized commercial use, SaaS hosting, or removal of branding is prohibited.
   For commercial licensing inquiries: https://github.com/AIIrondev
-->
{% extends "base.html" %}

{% block title %}Orte verwalten{% endblock %}

{% block content %}
<div class="container">
    <h1>Orte verwalten</h1>
    
    <div class="card">
        <div class="card-header">
            <h2>Neuen Ort hinzufügen</h2>
        </div>
        <div class="card-body">
            <form method="POST" action="{{ url_for('add_location_value') }}">
                <div class="form-group">
                    <label for="location-value">Ort:</label>
                    <input type="text" id="location-value" name="value" required placeholder="Neuen Ort eingeben">
                </div>
                <button type="submit" class="btn btn-primary">Hinzufügen</button>
            </form>
        </div>
    </div>
    
    <div class="card mt-4">
        <div class="card-header">
            <h2>Vorhandene Orte</h2>
        </div>
        <div class="card-body">
            {% if location_values %}
                <div class="location-values-list">
                    {% for value in location_values %}
                        <div class="location-value-item">
                            <span class="location-value">{{ value }}</span>
                            <form method="POST" action="{{ url_for('remove_location_value', value=value) }}" class="inline-form">
                                <button type="submit" class="btn btn-danger btn-sm" 
                                        onclick="return confirm('Sind Sie sicher, dass Sie diesen Ort entfernen möchten?')">
                                    Entfernen
                                </button>
                            </form>
                        </div>
                    {% endfor %}
                </div>
            {% else %}
                <div class="no-values-message">
                    Es wurden noch keine Orte definiert.
                </div>
            {% endif %}
        </div>
    </div>
    
    <div class="actions-container">
        <a href="{{ url_for('home_admin') }}" class="btn btn-secondary">Zurück zur Übersicht</a>
    </div>
</div>

<style>
    .container {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
    }
    
    h1 {
        text-align: center;
        margin-bottom: 30px;
        color: var(--ui-title);
    }
    
    .card {
        border-radius: 5px;
        box-shadow: var(--ui-shadow-sm);
        margin-bottom: 20px;
        background-color: var(--ui-surface);
        border: 1px solid var(--ui-border);
    }
    
    .card-header {
        background-color: var(--ui-surface-soft);
        padding: 15px 20px;
        border-bottom: 1px solid var(--ui-border);
    }
    
    .card-header h2 {
        margin: 0;
        font-size: 1.25rem;
        color: var(--ui-title);
    }
    
    .card-body {
        padding: 20px;
    }
    
    .form-group {
        margin-bottom: 15px;
    }
    
    .form-group label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
    }
    
    .form-group input {
        width: 100%;
        padding: 8px 12px;
        border: 1px solid var(--ui-border);
        border-radius: 4px;
        background: var(--ui-bg);
        color: var(--ui-text);
    }

    .form-group input:focus {
        outline: none;
        border-color: #60a5fa;
        box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.22);
    }
    
    .btn {
        padding: 8px 16px;
        border-radius: 4px;
        font-weight: bold;
        border: none;
        cursor: pointer;
    }
    
    .btn-primary {
        background-color: #007bff;
        color: white;
    }
    
    .btn-primary:hover {
        background-color: #0069d9;
    }
    
    .btn-secondary {
        background-color: #6c757d;
        color: white;
    }
    
    .btn-secondary:hover {
        background-color: #5a6268;
    }
    
    .btn-danger {
        background-color: #dc3545;
        color: white;
    }
    
    .btn-danger:hover {
        background-color: #c82333;
    }
    
    .btn-sm {
        padding: 4px 8px;
        font-size: 0.875rem;
    }
    
    .mt-4 {
        margin-top: 1.5rem;
    }
    
    .location-values-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 15px;
    }
    
    .location-value-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        background-color: var(--ui-surface-soft);
        border: 1px solid var(--ui-border);
        border-radius: 4px;
        border-left: 3px solid #6c757d;
        transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    }

    .location-value-item:hover {
        background-color: var(--ui-bg-accent);
        border-color: #60a5fa;
        transform: translateY(-1px);
    }
    
    .location-value {
        font-weight: 500;
        color: var(--ui-text);
    }
    
    .no-values-message {
        color: var(--ui-text-muted);
        font-style: italic;
        text-align: center;
        padding: 20px;
    }
    
    .inline-form {
        display: inline;
    }
    
    .actions-container {
        margin-top: 20px;
        display: flex;
        justify-content: flex-end;
    }

    @media (max-width: 576px) {
        .location-values-list {
            grid-template-columns: 1fr;
        }

        .location-value-item {
            gap: 10px;
        }

        .actions-container {
            justify-content: stretch;
        }

        .actions-container .btn {
            width: 100%;
        }
    }
</style>
{% endblock %}