{% extends "base.html" %}
{% block title %}New Report · House Report System{% endblock %}

{% block content %}
<div class="card">
  <div class="card-body">
    <h4 class="card-title mb-3">Create New Report</h4>

    <form method="post" enctype="multipart/form-data">

      <!-- Property -->
      <div class="mb-3">
        <label class="form-label">Property</label>
        <select name="property_id" class="form-select" required>
          <option value="">-- Select property --</option>
          {% for p in properties %}
            <option value="{{ p.id }}">
              {{ p.address }} — {{ p.city }}
            </option>
          {% endfor %}
        </select>
      </div>

      <!-- Condition -->
      <div class="mb-3">
        <label class="form-label">Condition</label>
        <select name="condition" class="form-select" required>
          <option value="Good">Good</option>
          <option value="Minor Issues">Minor Issues</option>
          <option value="Needs Maintenance">Needs Maintenance</option>
          <option value="Unsafe">Unsafe</option>
        </select>
      </div>

      <!-- Tags -->
      <div class="mb-3">
        <label class="form-label">Tags (comma separated)</label>
        <input type="text" name="tags" class="form-control"
               placeholder="roof, damp, cracks">
      </div>

      <!-- Summary -->
      <div class="mb-3">
        <label class="form-label">Summary / Notes</label>
        <textarea name="summary" rows="5" class="form-control"
                  placeholder="Describe the main issues or observations..."></textarea>
      </div>

      <!-- Images -->
      <div class="mb-3">
        <label class="form-label">Upload images (you can select multiple)</label>
        <input type="file" name="images" multiple accept="image/*" class="form-control">
        <div class="form-text">
          Hold CTRL (or CMD on Mac) to select more than one photo.
        </div>
      </div>

      <button class="btn btn-primary">Create Report</button>
      <a href="{{ url_for('main.index') }}" class="btn btn-outline-secondary">Cancel</a>

    </form>
  </div>
</div>
{% endblock %}