{% extends "common/base.html" %}
{% from 'components/header.html' import header %}

{% block title %}Create Room - DocuPulse{% endblock %}

{% block content %}
{{ header(
    title="Create New Room",
    description="Create a new room to organize and manage your documents",
    button_text="Cancel",
    button_url=url_for('rooms.rooms'),
    icon="fa-door-open",
    button_class="btn-secondary",
    button_icon="fa-times"
) }}

<div class="container-fluid py-4">
    <div class="card shadow-sm">
        <div class="card-body">
            <form method="POST" action="{{ url_for('rooms.create_room') }}">
                {{ form.hidden_tag() }}
                <div class="mb-3">
                    {{ form.name.label(class="form-label") }}
                    {{ form.name(class="form-control") }}
                    {% if form.name.errors %}
                    <div class="text-danger">
                        {% for error in form.name.errors %}
                        <small>{{ error }}</small>
                        {% endfor %}
                    </div>
                    {% endif %}
                </div>
                <div class="mb-3">
                    <label for="{{ form.description.id }}" class="form-label">Description (Optional)</label>
                    {{ form.description(class="form-control", rows="3", placeholder="Enter a description (optional)") }}
                    {% if form.description.errors %}
                    <div class="text-danger">
                        {% for error in form.description.errors %}
                        <small>{{ error }}</small>
                        {% endfor %}
                    </div>
                    {% endif %}
                </div>
                <div class="d-flex justify-content-end">
                    {{ form.submit(class="btn btn-primary") }}
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}