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

{% block title %} Compose {% 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="full-container">
          <div class="email-app">
          <div class="email-side-nav remain-height ov-h">
            <div class="h-100 layers">
              <div class="p-20 bgc-grey-100 layer w-100">
                <a href="/compose" class="btn btn-danger d-grid">New Message</a>
              </div>
              <div class="scrollable pos-r bdT layer w-100 fxg-1">
                <ul class="p-20 nav flex-column">
                  <li class="nav-item">
                    <a href="javascript:void(0)" class="nav-link c-grey-800 cH-blue-500 actived">
                      <div class="peers ai-c jc-sb">
                        <div class="peer peer-greed">
                          <i class="mR-10 ti-email"></i>
                          <span>Inbox</span>
                        </div>
                        <div class="peer">
                          <span class="badge rounded-pill bgc-deep-purple-50 c-deep-purple-700">+99</span>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="nav-item">
                    <a href="" class="nav-link c-grey-800 cH-blue-500">
                      <div class="peers ai-c jc-sb">
                        <div class="peer peer-greed">
                          <i class="mR-10 ti-share"></i>
                          <span>Sent</span>
                        </div>
                        <div class="peer">
                          <span class="badge rounded-pill bgc-green-50 c-green-700">12</span>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="nav-item">
                    <a href="" class="nav-link c-grey-800 cH-blue-500">
                      <div class="peers ai-c jc-sb">
                        <div class="peer peer-greed">
                          <i class="mR-10 ti-star"></i>
                          <span>Important</span>
                        </div>
                        <div class="peer">
                          <span class="badge rounded-pill bgc-blue-50 c-blue-700">3</span>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="nav-item">
                    <a href="" class="nav-link c-grey-800 cH-blue-500">
                      <div class="peers ai-c jc-sb">
                        <div class="peer peer-greed">
                          <i class="mR-10 ti-file"></i>
                          <span>Drafts</span>
                        </div>
                        <div class="peer">
                          <span class="badge rounded-pill bgc-amber-50 c-amber-700">5</span>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="nav-item">
                    <a href="" class="nav-link c-grey-800 cH-blue-500">
                      <div class="peers ai-c jc-sb">
                        <div class="peer peer-greed">
                          <i class="mR-10 ti-alert"></i>
                          <span>Spam</span>
                        </div>
                        <div class="peer">
                          <span class="badge rounded-pill bgc-red-50 c-red-700">1</span>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="nav-item">
                    <a href="" class="nav-link c-grey-800 cH-blue-500">
                      <div class="peers ai-c jc-sb">
                        <div class="peer peer-greed">
                          <i class="mR-10 ti-trash"></i>
                          <span>Trash</span>
                        </div>
                        <div class="peer">
                          <span class="badge rounded-pill bgc-red-50 c-red-700">+99</span>
                        </div>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="email-wrapper row remain-height pos-r scrollable bgc-white">
            <div class="email-content open no-inbox-view">
              <div class="email-compose">
                <div class="d-n@md+ p-20">
                  <a class="email-side-toggle c-grey-900 cH-blue-500 td-n" href="javascript:void(0)">
                    <i class="ti-menu"></i>
                  </a>
                </div>
                <form class="email-compose-body">
                  <h4 class="c-grey-900 mB-20">Send Message</h4>
                  <div class="send-header">
                    <div class="mb-3">
                      <input type="text" class='form-control' placeholder="To">
                    </div>
                    <div class="mb-3">
                      <input type="text" class='form-control' placeholder="CC">
                    </div>
                    <div class="mb-3">
                      <input class="form-control" placeholder="Email Subject">
                    </div>
                    <div class="mb-3">
                      <textarea name="compose" class="form-control" placeholder="Say Hi..." rows='10'></textarea>
                    </div>
                  </div>
                  <div id="compose-area"></div>
                  <div class="text-end mrg-top-30">
                    <button class="btn btn-danger btn-color">Send</button>
                  </div>
                </form>
              </div>
            </div>
          </div>
          </div>
        </div>
      </div>
    </main>

{% endblock content %}

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