{% extends 'partials/base.html' %}
{% load static %}
{% block content %}
  <div class="page-wrapper">
    <div class="content">
      <!-- Page Header -->
      <div class="d-md-flex d-block align-items-center justify-content-between mb-3">
        {% block title %}
          {% include 'partials/title.html' with title='Calendar' text='Dashboard' textone='Application' texttwo='Calendar' %}
        {% endblock %}
        <div class="d-flex my-xl-auto right-content align-items-center flex-wrap">
          <div class="mb-2">
            <a href="javascript:void(0);" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#add_event">Create Event</a>
          </div>
        </div>
      </div>
      <!-- /Page Header -->

      <div class="row">
        <!-- Drag & Drop Event -->
        <div class="col-lg-3 col-md-4">
          <h4 class="mb-3">Drag & Drop Event</h4>
          <div id="calendar-events" class="mb-3">
            <div class="calendar-events rounded" data-class="bg-info">
              <i class="ti ti-circle-filled fs-8 text-info"></i> My Event One
            </div>
            <div class="calendar-events rounded" data-class="bg-success">
              <i class="ti ti-circle-filled fs-8 text-success"></i> My Event Two
            </div>
            <div class="calendar-events rounded" data-class="bg-danger">
              <i class="ti ti-circle-filled fs-8 text-danger"></i> My Event Three
            </div>
            <div class="calendar-events rounded" data-class="bg-warning">
              <i class="ti ti-circle-filled fs-8 text-warning"></i> My Event Four
            </div>
          </div>
          <div class="form-check form-check mb-3">
            <input class="form-check-input" type="checkbox" />Remove after drop
          </div>
          <a href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#add_new_event" class="btn mb-3 btn-primary d-flex align-items-center justify-content-center"><i class="ti ti-plus me-1"></i>Add Category</a>
        </div>
        <!-- /Drag & Drop Event -->

        <!-- Calendar -->
        <div class="col-lg-9 col-md-8">
          <div class="card bg-white">
            <div class="card-body">
              <div id="calendar"></div>
            </div>
          </div>
        </div>
        <!-- /Calendar -->
      </div>
    </div>
  </div>
  <!-- Add Event Modal -->
  <div class="modal fade" id="add_event">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Add Event</h4>
          <button type="button" class="btn-close custom-btn-close" data-bs-dismiss="modal" aria-label="Close"><i class="ti ti-x"></i></button>
        </div>
        <form action="{% url 'calendar' %}">
          <div class="modal-body pb-0">
            <div class="mb-3">
              <label class="form-label">Event Name <span class="text-danger">*</span></label>
              <input class="form-control" type="text" />
            </div>
            <div class="mb-3">
              <label class="form-label">Event Date <span class="text-danger">*</span></label>
              <div class="cal-icon">
                <input class="form-control" type="date" />
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <a href="#" class="btn btn-light me-2" data-bs-dismiss="modal">Cancel</a>
            <button type="submit" class="btn btn-primary">Add Event</button>
          </div>
        </form>
      </div>
    </div>
  </div>
  <!-- /Add Event Modal -->

  <!-- Add Category Modal -->
  <div class="modal fade" id="add_new_event">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Add Category</h4>
          <button type="button" class="btn-close custom-btn-close" data-bs-dismiss="modal" aria-label="Close"><i class="ti ti-x"></i></button>
        </div>
        <form action="{% url 'calendar' %}">
          <div class="modal-body pb-0">
            <div class="mb-3">
              <label class="form-label">Category Name</label>
              <input class="form-control form-white" placeholder="Enter name" type="text" name="category-name" />
            </div>
            <div class="mb-3">
              <label class="form-label">Choose Category Color</label>
              <select class="select">
                <option>Choose a color...</option>
                <option value="success">Success</option>
                <option value="danger">Danger</option>
                <option value="info">Info</option>
                <option value="primary">Primary</option>
                <option value="warning">Warning</option>
                <option value="inverse">Inverse</option>
              </select>
            </div>
          </div>
          <div class="modal-footer">
            <a href="#" class="btn btn-light me-2" data-bs-dismiss="modal">Cancel</a>
            <button type="submit" class="btn btn-primary">Save</button>
          </div>
        </form>
      </div>
    </div>
  </div>
  <!-- /Add Category Modal -->
{% endblock %}