{% extends 'assistant/base.html' %}
{% load static %}

{% block sidebar.dashboard %} {% endblock %}
{% block sidebar.patients %} {% endblock %}
{% block sidebar.challenge %} {% endblock %}
{% block sidebar.appointments %} {% endblock %}
{% block sidebar.food_list %} class="active" {% endblock %}

{% block content %}
    <div class="content">
      <div class="row">
        <div class="col-sm-6">
          <h4 class="page-title" style="font-size: x-large; color: #009A6E;">{{ title }}</h4>
        </div>
        <div class="col-sm-6 text-right m-b-20">
          <a href="{% url 'panel-assistant-food-list' %}" class="btn btn-secondary btn-close" style="border-radius:10px;">بازگشت</a>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div class="card shadow-sm" style="border-radius:10px;">
            <div class="card-header text-center">
              <h5 class="card-title" style="color:#009A6E;">{{ title }}</h5>
            </div>
            <div class="card-body">
              <form method="post" novalidate>
                {% csrf_token %}
                <div class="row">
                  {% for field in form %}
                    <div class="col-md-6 mb-3">
                      <div class="form-group">
                        <label for="{{ field.id_for_label }}" class="font-weight-bold text-dark" style="font-size:14px;">{{ field.label }}</label>
                        {{ field }}
                        {% if field.help_text %}
                        <small class="form-text text-muted">{{ field.help_text }}</small>
                        {% endif %}
                        {% if field.errors %}
                        <div class="text-danger mt-1" style="font-size:12px;">{{ field.errors }}</div>
                        {% endif %}
                      </div>
                    </div>
                  {% endfor %}
                </div>
                <div class="form-group text-center mt-4">
                  <button type="submit" class="btn btn-primary btn-submit" style="border-radius:10px;">ذخیره</button>
                  <a href="{% url 'panel-assistant-food-list' %}" class="btn btn-secondary btn-close" style="border-radius:10px;">انصراف</a>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <style>
      .btn-submit {
        background-color: #009A6E;
        border-color: #009A6E;
        color: #fff;
        padding: 10px 20px;
        border-radius: 10px;
        text-decoration: none;
        transition: background-color 0.3s ease;
        display: inline-block;
        font-size: 14px;
      }
      .btn-submit:hover {
        background-color: #007A58;
        color: #fff;
      }
      .btn-close {
        background-color: #4b4b54;
        border-color: #4b4b54;
        color: #fff;
        padding: 10px 20px;
        border-radius: 10px;
        transition: background-color 0.3s ease;
        display: inline-block;
        font-size: 14px;
      }
      .btn-close:hover, .btn-close:focus {
        background-color: #333340;
      }
    
      .card {
        border: 1px solid #009A6E;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      }
    
      .card-header {
        background-color: #f8f9fa;
        border-bottom: 1px solid #009A6E;
        border-radius: 10px 10px 0 0;
        font-size: 16px;
        font-weight: bold;
      }
    
      form input, form select, form textarea {
        width: 100%;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 8px;
        font-size: 14px;
      }
    
      form input:focus, form select:focus, form textarea:focus {
        outline: none;
        border-color: #009A6E;
        box-shadow: 0 0 5px rgba(0, 154, 110, 0.5);
      }
    
      form input.is-invalid, form select.is-invalid, form textarea.is-invalid {
        border-color: red;
      }
    
      .text-danger {
        font-size: 12px;
      }
    
      @media (max-width: 768px) {
        .btn-submit, .btn-close {
          font-size: 12px;
          padding: 8px 16px;
        }
      }
    </style>
{% endblock %}