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

{% block title %} Calendar {% endblock title %}

<!-- Specific CSS goes HERE  -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}

    <!-- ### $App Screen Content ### -->
    <main class='main-content bgc-grey-100'>
      <div id='mainContent'>
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-4">
              <div class="bdrs-3 ov-h bgc-white bd">
                <div class="bgc-deep-purple-500 ta-c p-30">
                  <h1 class="fw-300 mB-5 lh-1 c-white">01<span class="fsz-def">st</span></h1>
                  <h3 class="c-white">Monday</h3>
                </div>
                <div class="pos-r">
                  <button type="button" class="mT-nv-50 pos-a r-10 t-2 btn cur-p bdrs-50p p-0 w-3r h-3r btn-warning">
                    <i class="ti-plus"></i>
                  </button>
                  <ul class="m-0 p-0 mT-20">
                    <li class="bdB peers ai-c jc-sb fxw-nw">
                      <a class="td-n p-20 peers fxw-nw me-20 peer-greed c-grey-900" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#calendar-edit">
                        <div class="peer mR-15">
                          <i class="fa fa-fw fa-clock-o c-red-500"></i>
                        </div>
                        <div class="peer">
                          <span class="fw-600">All Day Event</span>
                          <div class="c-grey-600">
                            <span class="c-grey-700">Nov 01 - </span>
                            <i>Website Development</i>
                          </div>
                        </div>
                      </a>
                      <div class="peers mR-15">
                        <div class="peer">
                          <a href="" class="td-n c-deep-purple-500 cH-blue-500 fsz-md p-5">
                            <i class="ti-pencil"></i>
                          </a>
                        </div>
                        <div class="peer">
                          <a href="" class="td-n c-red-500 cH-blue-500 fsz-md p-5">
                            <i class="ti-trash"></i>
                          </a>
                        </div>
                      </div>
                    </li>
                    <li class="bdB peers ai-c jc-sb fxw-nw">
                      <a class="td-n p-20 peers fxw-nw me-20 peer-greed c-grey-900" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#calendar-edit">
                        <div class="peer mR-15">
                          <i class="fa fa-fw fa-clock-o c-blue-500"></i>
                        </div>
                        <div class="peer">
                          <span class="fw-600">All Day Event</span>
                          <div class="c-grey-600">
                            <span class="c-grey-700">Nov 01 - </span>
                            <i>Website Development</i>
                          </div>
                        </div>
                      </a>
                      <div class="peers mR-15">
                        <div class="peer">
                          <a href="" class="td-n c-deep-purple-500 cH-blue-500 fsz-md p-5">
                            <i class="ti-pencil"></i>
                          </a>
                        </div>
                        <div class="peer">
                          <a href="" class="td-n c-red-500 cH-blue-500 fsz-md p-5">
                            <i class="ti-trash"></i>
                          </a>
                        </div>
                      </div>
                    </li>
                    <li class="bdB peers ai-c jc-sb fxw-nw">
                      <a class="td-n p-20 peers fxw-nw mR-20 peer-greed c-grey-900" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#calendar-edit">
                        <div class="peer mR-15">
                          <i class="fa fa-fw fa-clock-o c-indigo-500"></i>
                        </div>
                        <div class="peer">
                          <span class="fw-600">All Day Event</span>
                          <div class="c-grey-600">
                            <span class="c-grey-700">Nov 01 - </span>
                            <i>Website Development</i>
                          </div>
                        </div>
                      </a>
                      <div class="peers mR-15">
                        <div class="peer">
                          <a href="" class="td-n c-deep-purple-500 cH-blue-500 fsz-md p-5">
                            <i class="ti-pencil"></i>
                          </a>
                        </div>
                        <div class="peer">
                          <a href="" class="td-n c-red-500 cH-blue-500 fsz-md p-5">
                            <i class="ti-trash"></i>
                          </a>
                        </div>
                      </div>
                    </li>
                    <li class="bdB peers ai-c jc-sb fxw-nw">
                      <a class="td-n p-20 peers fxw-nw mR-20 peer-greed c-grey-900" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#calendar-edit">
                        <div class="peer mR-15">
                          <i class="fa fa-fw fa-clock-o c-green-500"></i>
                        </div>
                        <div class="peer">
                          <span class="fw-600">All Day Event</span>
                          <div class="c-grey-600">
                            <span class="c-grey-700">Nov 01 - </span>
                            <i>Website Development</i>
                          </div>
                        </div>
                      </a>
                      <div class="peers mR-15">
                        <div class="peer">
                          <a href="" class="td-n c-deep-purple-500 cH-blue-500 fsz-md p-5">
                            <i class="ti-pencil"></i>
                          </a>
                        </div>
                        <div class="peer">
                          <a href="" class="td-n c-red-500 cH-blue-500 fsz-md p-5">
                            <i class="ti-trash"></i>
                          </a>
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="col-md-8">
              <div id='calendar'></div>
            </div>
          </div>
          <div class="modal fade" id="calendar-edit">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="bd p-15">
                  <h5 class="m-0">Add Event</h5>
                </div>
                <div class="modal-body">
                  <form>
                    <div class="mb-3">
                      <label class="form-label fw-500">Event title</label>
                      <input class="form-control bdc-grey-200">
                    </div>
                    <div class="row">
                      <div class="col-md-6">
                        <label class="fw-500 form-label">Start</label>
                        <div class="timepicker-input input-icon mb-3">
                          <div class="input-group">
                            <div class="input-group-text bgc-white bd bdwR-0">
                              <i class="ti-calendar"></i>
                            </div>
                            <input type="text" class="form-control bdc-grey-200 start-date" placeholder="Datepicker" data-provide="datepicker">
                          </div>
                        </div>
                      </div>
                      <div class="col-md-6">
                        <label class="fw-500 form-label">End</label>
                        <div class="timepicker-input input-icon mb-3">
                          <div class="input-group">
                            <div class="input-group-text bgc-white bd bdwR-0">
                              <i class="ti-calendar"></i>
                            </div>
                            <input type="text" class="form-control bdc-grey-200 end-date" placeholder="Datepicker" data-provide="datepicker">
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="mb-3">
                      <label class="fw-500 form-label">Event title</label>
                      <textarea class="form-control bdc-grey-200" rows='5'></textarea>
                    </div>
                    <div class="text-end">
                      <button class="btn btn-primary cur-p btn-color" data-dismiss="modal">Done</button>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>

{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}{% endblock javascripts %}