{% extends "layout/base.html" %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
  <h2 class="mb-0">New Feedback</h2>
  <a class="btn btn-outline-secondary" href="{{ url_for('main.feedback_page') }}">Back</a>
</div>

<form method="post" enctype="multipart/form-data" class="card">
  <div class="card-body">
    <div class="row g-3">
      <div class="col-12 col-md-3">
        <label class="form-label">Type</label>
        <select name="item_type" class="form-select" required>
          <option value="bug">Bug</option>
          <option value="feature">Feature</option>
        </select>
      </div>
      <div class="col-12 col-md-9">
        <label class="form-label">Title</label>
        <input type="text" name="title" class="form-control" required />
      </div>
      <div class="col-12">
        <label class="form-label">Description</label>
        <textarea name="description" class="form-control" rows="8" required></textarea>
      </div>
      <div class="col-12 col-md-6">
        <label class="form-label">Component (optional)</label>
        <input type="text" name="component" class="form-control" />
      </div>
      <div class="col-12">
        <label class="form-label">Screenshots (optional)</label>
        <input type="file" name="screenshots" class="form-control" multiple accept="image/png,image/jpeg,image/jpg,image/gif,image/webp" />
        <div class="form-text">You can attach multiple screenshots (PNG, JPG, GIF, WEBP, max 5MB each)</div>
      </div>
    </div>
  </div>
  <div class="card-footer d-flex justify-content-end">
    <button type="submit" class="btn btn-primary">Create</button>
  </div>
</form>
{% endblock %}