<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:output method="html" encoding="utf-8" indent="yes"/>

    <!-- Parameters -->

    <xsl:param name="VERSION">1.0</xsl:param>
    <xsl:param name="PAGE-TITLE">Add Alert</xsl:param>
    <xsl:param name="PAGE-NAME">addAlert</xsl:param>

    <xsl:template match="/">
    
        <script src="js/{$PAGE-NAME}.js?version={$VERSION}"/>   
        <script src="js/ckeditor.js?version={$VERSION}"/>   

        <div class="{$PAGE-NAME}">
      
            <div class="card">
        
                <div class="card-header bg-primary text-white p-1 ps-3 border-bottom-0">
                    <i class="bi bi-plus-lg me-2"/>
                    <xsl:value-of select="$PAGE-TITLE"/>
          
                </div>
        
                <div class="card-body">
          
                    <form action="" name="{$PAGE-NAME}" method="post" id="{$PAGE-NAME}" enctype="multipart/form-data">

                        <input type="hidden" name="action" value="Alerts.addAlert"/>
                        <input type="hidden" name="step"   value="add"/>
            
                        <div class="row">

                            <div class="col-lg-5 mb-3">
                                <label class="form-label" for="alert_title">Title</label>
                                <input type="text" class="form-control form-control-sm" name="alert_title" id="alert_title" maxlength="100" autocomplete="off" autofocus="yes"/>
                            </div>

                        </div>
                                    
                        <div class="row">
                            
                            <div class="col-md-3 mb-3">

                                <label class="form-label" for="alert_starts_date">Start Date</label>

                                <div class="input-group input-group-sm starts-date">
                                    
                                    <span class="input-group-text">Date:</span>
                                    <input type="text" class="form-control form-control-sm date-mask" name="alert_starts_date" id="alert_starts_date" autocomplete="off" maxlength="10"
                                           value="{$TODAY_YYYYMMDD}"/>
                                    <button class="btn btn-outline-primary btnAlertStartDateCalendar" type="button" data-target="#alert_starts_date" data-bs-toggle="tooltip" data-bs-title="Calendar" tabindex="-1">
                                        <i class="bi bi-calendar3"></i>
                                    </button>
                                    
                                </div>
                                
                            </div>
                            
                            <div class="col-md-3 mb-3">
                                
                                <label class="form-label" for="alert_starts_time">Start Time <span class="text-small text-muted text-nowrap ml-2">(24-Hour format)</span></label>

                                <div class="input-group input-group-sm">
                                    
                                    <span class="input-group-text">Time:</span>
                                    <input type="text" class="form-control form-control-sm date-mask" name="alert_starts_time" id="alert_starts_time" autocomplete="off" maxlength="10"
                                           value="{$TODAY_HHMM}"/>
                                    
                                </div>
                                
                            </div>
                            
                        </div>
                        <div class="row">
                            
                            <div class="col-md-3 mb-3">

                                <label class="form-label" for="alert_expires_date">Expires Date</label>

                                <div class="input-group input-group-sm expires-date">
                                    
                                    <span class="input-group-text">Date:</span>
                                    <input type="text" class="form-control form-control-sm date-mask" name="alert_expires_date" id="alert_expires_date" autocomplete="off" maxlength="10"/>
                                    <button class="btn btn-outline-primary btnAlertExpiresDateCalendar" type="button" data-target="#alert_expires_date" data-bs-toggle="tooltip" data-bs-title="Calendar" tabindex="-1">
                                        <i class="bi bi-calendar3"></i>
                                    </button>
                                    
                                </div>
                                
                            </div>
                            
                            <div class="col-md-3 mb-3">
                                
                                <label class="form-label" for="alert_expires_time">Expires Time <span class="text-small text-muted text-nowrap ml-2">(24-Hour format)</span></label>

                                <div class="input-group input-group-sm start_date">
                                    
                                    <span class="input-group-text">Time:</span>
                                    <input type="text" class="form-control form-control-sm date-mask" name="alert_expires_time" id="alert_expires_time" autocomplete="off" maxlength="10"/>
                                    
                                </div>
                                
                            </div>
                            
                        </div>

                              
                        <div class="row">

                            <div class="col-lg-12 mb-3">
                                <label class="form-label" for="alert_message">Alert Message</label>
                                <textarea class="form-control form-control-sm" name="alert_message" id="alert_message"/>
                            </div>

                        </div>
            
                    </form>

                    <div class="buttons mt-1 mb-2">
                        <button type="button" class="btn btn-sm btn-primary me-2 btnCancel">
                            <i class="bi bi-box-arrow-left me-2"/>Cancel</button>
                        <button type="button" class="btn btn-sm btn-primary me-2 btnSave">
                            <i class="bi bi-save me-2"/>Save</button>
                    </div>
          
                </div>
        
            </div>
      
        </div>
          
    </xsl:template>

</xsl:stylesheet>
