{% extends 'dashboard/base.html' %}
{% load static %}
{% load customtag %}
{% block title %}{{ title }} - {{ seo_settings.meta_title }}{% endblock title %}
{% block content %}
<style>

    /* Media query for mobile devices */
    @media (max-width: 768px) {
      #cke_id_description {
        width: 309px !important;
      }
    }
  
    /* Media query for desktop devices */
    @media (min-width: 769px) {
      #cke_id_description {
        width: 980px !important;
        position: relative;
      }
    }
  </style>
<div class="page-body">
   <div class="container-fluid">
      <div class="page-title">
         <div class="row">
            <div class="col-6">
               <h3>{{ title }}</h3>
            </div>
            <div class="col-6">
               <ol class="breadcrumb">
                  <li class="breadcrumb-item">
                     <a href="{% url 'adminHome' %}">
                        <svg class="stroke-icon">
                           <use href="{% static 'admin/assets/svg/icon-sprite.svg' %}#stroke-home"></use>
                        </svg>
                     </a>
                  </li>
                  <li class="breadcrumb-item">Users</li>
                  <li class="breadcrumb-item active">Edit Profile</li>
               </ol>
            </div>
         </div>
      </div>
   </div>
   <!-- Container-fluid starts-->
   <div class="container-fluid">
      <div class="row project-cards">
         <div class="col-md-12 project-list">
         </div>
         <div class="container">
            <form method="POST" enctype="multipart/form-data">
               {% csrf_token %}
               {{form.media}}  
               {% if messages %}
                    {% for message in messages %}
                        <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                            {{ message }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    {% endfor %}
                {% endif %} 
               {% if form.errors %}
               <div class="alert alert-danger">
                  <strong>Error:</strong>
                  <ul>
                     {% for field, errors in form.errors.items %}
                     {% for error in errors %}
                     <li>{{ field }}: {{ error }}</li>
                     {% endfor %}
                     {% endfor %}
                  </ul>
               </div>
               {% endif %}                   
               <div class="row mb-3">
                  <div class="col-md-12">
                      <div class="card">
                          <div class="card-body">
                              <label for="{{ form.profile_picture.id_for_label }}" class="form-label">Profile Picture <span class="text-danger">*</span></label>
                              {% if profile.profile_picture %}
                              <br>
                              <img class="currentImg" style="border-radius:10px; width:100px;" src="{{ profile.profile_picture.url }}" alt="Current Image">
                              <br>
                              {% endif %}
                              {{ form.profile_picture }}
                          </div>
                      </div>
                  </div>
              </div>

              <div class="row mb-3">
                  <div class="col-md-4">
                      <div class="card">
                          <div class="card-body">
                              <label for="{{ form.name.id_for_label }}" class="form-label">Name <span class="text-danger">*</span></label>
                              {{ form.name }}
                          </div>
                      </div>
                  </div>
                  <div class="col-md-4">
                      <div class="card">
                          <div class="card-body">
                              <label for="{{ form.email.id_for_label }}" class="form-label">Email <span class="text-danger">*</span></label>
                              {{ form.email}}
                          </div>
                      </div>
                  </div>
                  <div class="col-md-4">
                      <div class="card">
                          <div class="card-body">
                              <label for="{{ form.phone.id_for_label }}" class="form-label">Phone <span class="text-danger">*</span></label>
                              {{ form.phone}}
                          </div>
                      </div>
                  </div>
              </div>
              
              <div class="row mb-3">
                  <div class="col-md-6">
                      <div class="card">
                          <div class="card-body">
                              <label for="{{ form.role.id_for_label }}" class="form-label">Role <span class="text-danger">*</span></label>
                              {{ form.role|add_class:'form-select' }}
                          </div>
                      </div>
                  </div>
                  <div class="col-md-6">
                      <div class="card">
                          <div class="card-body">
                              <label for="{{ form.slug.id_for_label }}" class="form-label">Profile Slug <span class="text-danger">*</span></label>
                              {{ form.slug }}
                          </div>
                      </div>
                  </div>
              </div>

              <div class="row mb-3">
                  <div class="col-md-4">
                      <div class="card">
                          <div class="card-body">
                              <label for="{{ form.address.id_for_label }}" class="form-label">Address <span class="text-danger">*</span></label>
                              {{ form.address }}
                          </div>
                      </div>
                  </div>
                  <div class="col-md-4">
                      <div class="card">
                          <div class="card-body">
                              <label for="{{ form.city.id_for_label }}" class="form-label">City <span class="text-danger">*</span></label>
                              {{ form.city }}
                          </div>
                      </div>
                  </div>
                  <div class="col-md-4">
                      <div class="card">
                          <div class="card-body">
                              <label for="{{ form.state.id_for_label }}" class="form-label">State <span class="text-danger">*</span></label>
                              {{ form.state }}
                          </div>
                      </div>
                  </div>
              </div>

              <div class="row mb-3">
                  <div class="col-md-6">
                      <div class="card">
                          <div class="card-body">
                              <label for="{{ form.zipcode.id_for_label }}" class="form-label">Zipcode <span class="text-danger">*</span></label>
                              {{ form.zipcode }}
                          </div>
                      </div>
                  </div>
                  <div class="col-md-6">
                      <div class="card">
                          <div class="card-body">
                              <label for="{{ form.country.id_for_label }}" class="form-label">Country <span class="text-danger">*</span></label>
                              {{ form.country }}
                          </div>
                      </div>
                  </div>
              </div>

              <div class="row mb-1">
                  <div class="col-md-4">
                      <div class="card">
                          <div class="card-body">
                              <label for="{{ form.facebook.id_for_label }}" class="form-label">Facebook <span class="text-danger">*</span></label>
                              {{ form.facebook }}
                          </div>
                      </div>
                  </div>
                  <div class="col-md-4">
                      <div class="card">
                          <div class="card-body">
                              <label for="{{ form.instagram.id_for_label }}" class="form-label">Instagram <span class="text-danger">*</span></label>
                              {{ form.instagram }}
                          </div>
                      </div>
                  </div>
                  <div class="col-md-4">
                      <div class="card">
                          <div class="card-body">
                              <label for="{{ form.linkedin.id_for_label }}" class="form-label">Linkedin <span class="text-danger">*</span></label>
                              {{ form.linkedin }}
                          </div>
                      </div>
                  </div>
              </div>
              <!-- Add more form fields as needed -->
              
              <button class="btn btn-primary mb-5" type="submit">Save</button>
            </form>
         </div>
      </div>
   </div>
</div>
<!-- Container-fluid Ends-->
{% endblock %}