{% extends "base.html" %}
{% block title %}Create Warehouse Locations{% endblock %}
{% block content %}
<div class="scan-container">
    <!-- Add Warehouse Location Card -->
    <div class="card scan-form-card">
        <h3>Add Warehouse Location</h3>
        {% if message %}
        <div class="form-message">{{ message }}</div>
        {% endif %}
        <form method="POST" class="form-centered">
            <label>Location Code:</label>
            <input type="text" name="location_code" maxlength="12" required><br>
            <label>Size:</label>
            <input type="number" name="size"><br>
            <label>Description:</label>
            <input type="text" name="description" maxlength="250"><br>
            <button type="submit" class="btn">Add Location</button>
        </form>
        <!-- Import from CSV content moved here -->
        <div style="margin-top: 24px;">
            <h3 style="font-size: 1.1em;">Import Locations from CSV</h3>
            <div style="display: flex; flex-direction: row; gap: 16px; align-items: center;">
                <span style="font-size: 0.95em;">Bulk import warehouse locations using a CSV file.</span>
                <a href="{{ url_for('warehouse.import_locations_csv') }}" class="btn" style="padding: 4px 12px; font-size: 0.95em;">Go to Import Page</a>
            </div>
        </div>
    </div>
    <!-- Locations Table Card -->
    <div class="card scan-table-card">
        <h3>Warehouse Locations</h3>
        <table class="scan-table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Location Code</th>
                    <th>Size</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody>
                {% for loc in locations %}
                <tr>
                    <td>{{ loc[0] }}</td>
                    <td>{{ loc[1] }}</td>
                    <td>{{ loc[2] }}</td>
                    <td>{{ loc[3] }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}