{% extends '../base.html' %}
{% load static %}
{% block content %}

<style>
  .custom-selectyu {
    display: none;
    position: absolute;
    width: 100%;
    padding:15px;
    max-height: 200px; /* Set a max height for scrolling */
    background-color: #f9f9f9;
    overflow-y: scroll;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    z-index: 2; /* Make sure the dropdown appears above other content */
  }
  .custom-selectyu.show {
    display: block;
    z-index: 2; 
    overflow-y: scroll;
  }
  .inp {
    height: 40px;
    width: 100%;
    border: 1px solid #b2b2b2;
    outline: none;
    padding-left: 15px;
    position: relative; /* Ensures the input is positioned correctly relative to parent */
    z-index: 1; /* Ensures the input is above the background but below the options */
  }


  .tick-icon {
    display: none; /* Initially hide the tick icon */
  }
  
  .tick-icon.show {
    display:block; /* Show the tick icon when the "show" class is present */
    color:white;
    font-size:15px;
    padding-right:10px;
  }

  
  .option {
    cursor: pointer;
    display:flex;
    justify-content:space-between;
    padding-left:10px;
    padding-top:5px;
    padding-bottom:5px;
    margin-bottom:2px;
  }
  
  .option.active {
  color:white;
    background-color: #006eff;
    display:flex;
    justify-content:space-between;
    padding-left:10px;
    padding-top:5px;
    padding-bottom:5px;
    margin-bottom:2px;
  }
  </style>
<div class="container-fluid py-4">
  <div class="row">
    <div class="col-12">
      <div class="row">
        <div class="col-xl-11 col-sm-10 col-8 mb-xl-0 mb-4">
          {% comment %} <div class="card"> {% endcomment %}
            {% comment %} <div class="card-body p-3"> {% endcomment %}
              <div class="row">
                <div class="col-md-1 col-3">
                  <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
                    <i class="ri-mail-send-line text-lg opacity-10" aria-hidden="true"></i>
                  </div> 
                </div>
                <div class="col-md-11 col-9" style="display:flex; align-items:center;">
                  <div class="numbers">
                    <h5 class="font-weight-bolder mb-0">Send Mail:</h5>
                  </div>
                </div>
              </div>
            {% comment %} </div> {% endcomment %}
          {% comment %} </div> {% endcomment %}
        </div>
        <div class="col-xl-1 col-sm-2 col-4 mb-xl-0 mb-4">
          <div id="loading"></div>
        </div>
      </div>
      <div class="card mt-4" style="padding:30px;">
        {% if messages %}
          <div class="form-group">
          <div class="col-12">
              {% for message in messages %}
              {% if message.tags == "error" %}
                  <div class="alert alert-danger alert-dismissible fade show" role="alert" style="color:white; font-weight:600;">
                  {{ message }}
                  </div>
              {% elif message.tags == "success" %}
                  <div class="alert alert-success alert-dismissible fade show" role="alert" style="color:white; font-weight:600;">
                  {{ message }}
                  </div>
              {% endif %}
              {% endfor %}
            </div>
          </div>
          {% endif %}
            <form method="post" action="{% url 'sendMail' %}" enctype="multipart/form-data" id="AddRA">
                {% comment %} <div class="modal-body"> {% endcomment %}
                    {% csrf_token %}
                    <input type="hidden" class="form-control" name="enteredBy" value={{user.id}}>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label for="recipient-name" class="col-form-label">From:</label>                          
                                <input type="email" class="form-control" name="form" value="{{userMail}}" readonly>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label for="recipient-name" class="col-form-label">To:</label>
                                <input type="email" class="form-control" name="to" value="{{decrypted_mail}}" readonly>
                            </div>
                        </div>
                      </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label for="recipient-name" class="col-form-label">Subject:</label>                          
                                <input type="text" class="form-control" name="subject">
                            </div>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label for="recipient-name" class="col-form-label">Content:</label>
                                <textarea id="editor" name="editor"></textarea>
                              </div>
                            </div>
                          </div>
                          <div class="row">
                            <div class="col-sm-12">
                              <div class="form-group">
                                <label for="recipient-name" class="col-form-label">Attachments:</label>
                                <input type="file" class="form-control" name="attachment" multiple>
                            </div>
                        </div>
                    </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" onclick="window.location.href='/getTrainerList'">Close</button>
                    <button type="submit" class="btn bg-gradient-primary">Add</button>
                  </div>
              </form>
      </div>
    </div>
  </div>
<script>
    // Replace 'editor' with the id of your textarea
    CKEDITOR.replace('editor');
</script>
  {% endblock content %}