{% extends "pos/base.html" %}
{% block title %}{% if is_edit %}Edit{% else %}Add{% endif %} Category{% endblock %}
{% block heading %}{% if is_edit %}Edit{% else %}Add{% endif %} Room Category{% endblock %}
{% if form.errors %}
  <div class="alert alert-danger"><strong>Fix the errors below.</strong></div>
{% endif %}

{% block content %}
<form method="post" enctype="multipart/form-data">
  {% csrf_token %}
  <div class="row">
    <div class="col-md-3">
      <label class="small mb-1">Code</label>
      {{ form.code }}
    </div>
    <div class="col-md-5">
      <label class="small mb-1">Name</label>
      {{ form.name }}
    </div>
    <div class="col-md-2">
      <label class="small mb-1">Adults</label>
      {{ form.capacity_adults }}
    </div>
    <div class="col-md-2">
      <label class="small mb-1">Children</label>
      {{ form.capacity_children }}
    </div>
  </div>
  <div class="row mt-2">
    <div class="col-md-3">
      <label class="small mb-1">Base Rate</label>
      {{ form.base_rate }}
    </div>
    <div class="col-md-9">
      <label class="small mb-1">Description</label>
      {{ form.description }}
    </div>
  </div>

  <div class="row mt-2">
    <div class="col-md-4">
      <label class="small mb-1">Photo (2:1)</label>
      {{ form.photo }}
      <small class="form-text text-muted">
        Recommended: 1200×600px, JPG/PNG/WebP, ≤5MB (auto center-crop to 4×2 inch ratio)
      </small>
    </div>
    {% if is_edit and obj.photo %}
    <div class="col-md-4">
      <label class="small mb-1 d-block">Current</label>
      <img src="{{ obj.photo.url }}" alt="Current" class="img-thumbnail"
           style="max-width:240px; aspect-ratio:2/1; object-fit:cover;">
    </div>
    {% endif %}
  </div>

  
  <div class="mt-3">
    <button class="btn btn-success"><i class="fas fa-save mr-1"></i>Save</button>
    <a href="{% url 'hotel:cat_list' %}" class="btn btn-secondary">Cancel</a>
  </div>
</form>
{% endblock %}