  <!--start main wrapper-->
  <main class="main-wrapper">
        <div class="main-content">
            <a href="<?php echo base_url('site/messagecenter'); ?>" class="btn guestBtn d-flex gap-2 align-items-center" id="backBtn">
                <img src="<?php echo base_url(); ?>assets/images/arowleft.svg" alt="" width="15px"> Back
            </a>
            <div class="row">
                <div class="col-md-8 my-2">
                    <h3 class="fmon fw-bold"> <i class="fa fa-message"></i>
                     <?php echo $template['name'] ?>
                    </h3>
                </div>

            </div>
            <form id="messageForm" action="<?php echo base_url('site/sendmessage'); ?>" method="POST" enctype="multipart/form-data">
                <input type="hidden" name="template_id" value="<?php echo $template['id']; ?>">
                <div class="row">
                    <div class="col-md-7">
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-md-12 my-2">
                                    <label for="" class="form-label fw-bold">Message title</label>
                                    <input type="text" name="subject" id="subject" class="form-control Formselet" 
                                        value="<?php echo $template['subject'] ?>" required/>
                                </div>
                                
                                <div class="col-md-12 my-2">
                                    <label for="" class="form-label fw-bold">Message Content</label>
                                    <textarea id="editor" name="content"><?php echo $template['content'] ?></textarea>
                                </div>

                                <div class="col-m-12 my-2">
                                    <div class="brower2 d-flex justify-content-center align-items-center">
                                        <div class="d-flex flex-column align-items-center">
                                            <img src="<?php echo base_url(); ?>assets/images/up2.png" alt="" width="20px">
                                            <small>Drag and Drop here or <label for="attachments" class="text-primary" style="cursor: pointer;">Browse Files</label></small>
                                            <input class="d-none" type="file" name="attachments" id="attachments" multiple>
                                        </div>
                                    </div>
                                    <div id="fileList" class="mt-2"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-5 my-2">
                        <div>
                            <div class="custom-toolbar2 px-3 py-2">
                                <p class="mb-0 ft8">Recipients</p>
                            </div>
                            <div class="d-flex justify-content-between align-items-center my-2">
                                <label for="" class="form-label fw-bold">Select the recipients of the message</label>
                                <button type="button" class="btn btn-primary" id="clearRecipients"><i class="fa fa-trash"></i></button>
                            </div>

                            <input type="hidden" name="selected_recipients" id="selectedRecipients">
                            
                            <div class="recbox d-flex gap-1 flex-wrap p-2 border mt-3" id="selectedRecipientsBox"></div>

                            <div class="predefined-recbox d-flex flex-column p-2 border mt-3">
                                <div class="predefined-category">
                                    <strong>** Distribution Lists</strong>
                                    <div class="recbox2 predefined-item my-1" data-type="list" data-value="all_units">All the units</div>
                                    <div class="recbox2 predefined-item my-1" data-type="list" data-value="owners">Just Owners</div>
                                </div>
                                <div class="predefined-category mt-1">
                                    <strong>** Users</strong>
                                    <?php foreach ($users as $key=>$user) { ?>
                                    <div class="recbox2 predefined-item my-2" data-type="user" data-value="<?php echo $key ?>"><?php echo $user['fullName'] ?></div>
                                    <?php } ?>
                                </div>
                            </div>

                            <div class="form-check form-switch my-4">
                                <label class="form-check-label" for="sendcopy">Send a copy to the recipients email address?</label>
                                <input class="form-check-input" type="checkbox" role="switch" id="sendcopy" name="send_copy">
                            </div>
                        </div>
                        <div class="custom-toolbar2 px-3 py-2 mt-2">
                            <p class="mb-0 ft8">Message Delivery</p>
                        </div>

                        <div class="form-group">
                            <label>Select when to send the message:</label><br>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="send_time" id="immediately" value="immediately" checked>
                                <label class="form-check-label" for="immediately">Immediately</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="send_time" id="specificDate" value="specificDate">
                                <label class="form-check-label" for="specificDate">Specific Date</label>
                            </div>
                        </div>

                        <div id="dateTimePicker" class="form-group" style="display: none;">
                            <label for="datetime">Select Date and Time:</label>
                            <div class='input-group date'>
                                <input type='datetime-local' class="form-control" name="scheduled_time" id="scheduledTime"/>
                            </div>
                        </div>

                        <div id="imed" class="text-success">
                            The message will be sent immediately
                        </div>

                        <div class="row justify-content-end">
                            <div class="col-md-5 my-2">
                                <button type="button" id="saveDraft" class="btn savedBtn py-2 w-100">Save Draft</button>
                            </div>
                            <div class="col-md-3 my-2">
                                <button type="button" id="sendNow" class="btn sendBtn py-2 w-100">Send</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        </div>

    </main>
    <!--end main wrapper-->
    ```
    </main>
    <!--end main wrapper-->
    
