{% extends "base.html" %}

{% block title %}{{ title }} - Inspection Reporting Tool{% endblock %}

{% block content %}
<div class="mb-6">
    <h1 class="text-2xl font-bold text-gray-800">{{ title }}</h1>
</div>

<form method="POST" enctype="multipart/form-data" class="space-y-6">
    {{ form.hidden_tag() }}
    
    <div class="card">
        <div class="card-header">
            <h2 class="text-xl font-semibold text-gray-900">Inspection Details</h2>
        </div>
        <div class="card-body">
            <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
                <div class="sm:col-span-3">
                    {{ form.inspection_date.label(class="block text-sm font-medium text-gray-700 mb-1") }}
                    {{ form.inspection_date(class="form-input") }}
                    {% if form.inspection_date.errors %}
                        <ul class="mt-2 text-sm text-red-600">
                            {% for error in form.inspection_date.errors %}
                                <li>{{ error }}</li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                </div>
                
                <div class="sm:col-span-6">
                    {{ form.installation_name.label(class="block text-sm font-medium text-gray-700 mb-1") }}
                    {{ form.installation_name(class="form-input") }}
                    {% if form.installation_name.errors %}
                        <ul class="mt-2 text-sm text-red-600">
                            {% for error in form.installation_name.errors %}
                                <li>{{ error }}</li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                </div>
                
                <div class="sm:col-span-6">
                    {{ form.location.label(class="block text-sm font-medium text-gray-700 mb-1") }}
                    {{ form.location(class="form-input") }}
                    {% if form.location.errors %}
                        <ul class="mt-2 text-sm text-red-600">
                            {% for error in form.location.errors %}
                                <li>{{ error }}</li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                </div>
                
                <div class="sm:col-span-3">
                    {{ form.version.label(class="block text-sm font-medium text-gray-700 mb-1") }}
                    {{ form.version(class="form-input") }}
                    {% if form.version.errors %}
                        <ul class="mt-2 text-sm text-red-600">
                            {% for error in form.version.errors %}
                                <li>{{ error }}</li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                </div>
                
                <div class="sm:col-span-3">
                    {{ form.reference_number.label(class="block text-sm font-medium text-gray-700 mb-1") }}
                    {{ form.reference_number(class="form-input") }}
                    {% if form.reference_number.errors %}
                        <ul class="mt-2 text-sm text-red-600">
                            {% for error in form.reference_number.errors %}
                                <li>{{ error }}</li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    
    <div class="card">
        <div class="card-header">
            <h2 class="text-xl font-semibold text-gray-900">General Comments</h2>
        </div>
        <div class="card-body">
            <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
                <div class="sm:col-span-6">
                    {{ form.general_comments.label(class="block text-sm font-medium text-gray-700 mb-1") }}
                    {{ form.general_comments(class="form-textarea") }}
                    {% if form.general_comments.errors %}
                        <ul class="mt-2 text-sm text-red-600">
                            {% for error in form.general_comments.errors %}
                                <li>{{ error }}</li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    
    <div class="card">
        <div class="card-header">
            <h2 class="text-xl font-semibold text-gray-900">Photo Upload</h2>
        </div>
        <div class="card-body">
            <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
                <div class="sm:col-span-6">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Upload Photos</label>
                    <input type="file" id="photo-upload" name="photos" multiple accept="image/*" class="form-input">
                    <p class="mt-1 text-sm text-gray-500">Select one or more images to upload</p>
                </div>
            </div>
        </div>
    </div>
    
    <div class="card">
        <div class="card-header">
            <h2 class="text-xl font-semibold text-gray-900">Inspection Results</h2>
        </div>
        <div class="card-body">
            <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
                <div class="sm:col-span-6">
                    {{ form.conclusion_status.label(class="block text-sm font-medium text-gray-700 mb-1") }}
                    {{ form.conclusion_status(class="form-input") }}
                    {% if form.conclusion_status.errors %}
                        <ul class="mt-2 text-sm text-red-600">
                            {% for error in form.conclusion_status.errors %}
                                <li>{{ error }}</li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                </div>
                
                <div class="sm:col-span-6">
                    {{ form.conclusion_text.label(class="block text-sm font-medium text-gray-700 mb-1") }}
                    {{ form.conclusion_text(class="form-textarea") }}
                    {% if form.conclusion_text.errors %}
                        <ul class="mt-2 text-sm text-red-600">
                            {% for error in form.conclusion_text.errors %}
                                <li>{{ error }}</li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    
    <div class="flex justify-end space-x-3">
        <button type="submit" class="btn btn-primary">
            Save
        </button>
        <a href="{{ url_for('inspections.dashboard') }}" class="btn btn-outline">
            Cancel
        </a>
    </div>
</form>
{% endblock %}