<?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">Edit Popover</xsl:param>
  <xsl:param name="PAGE-NAME">editPopover</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-chat-square-dots 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="Popovers.editPopover"/>
            <input type="hidden" name="step"   value="update"/>
            
            <input type="hidden" name="popover_serial" id="popover_serial" value="{//popovers/record/popover_serial}"/>
          
            <div class="row">

              <div class="col-lg-5 mb-3">
                <label class="form-label" for="popover_name">Name</label>
                <input type="text" class="form-control form-control-sm" name="popover_name" id="popover_name" maxlength="100" autocomplete="off" autofocus="autofocus" value="{//popovers/record/popover_name}"/>
              </div>

            </div>
          
            <div class="row">

              <div class="col-lg-5 mb-3">
                <label class="form-label" for="popover_title">Title</label>
                <input type="text" class="form-control form-control-sm" name="popover_title" id="popover_title" maxlength="100" autocomplete="off" value="{//popovers/record/popover_title}"/>
              </div>

            </div>
            
            <div class="row">

              <div class="col-lg-5 mb-3">
                <label class="form-label" for="popover_placeholder">Placeholder</label>
                <input type="text" class="form-control form-control-sm" name="popover_placeholder" id="popover_placeholder" maxlength="100" autocomplete="off" value="{//popovers/record/popover_placeholder}"/>
              </div>

            </div>
          
            <div class="row">

              <div class="col-lg-10 mb-3">
                <label class="form-label" for="popover_text">Popover Text</label>
                <textarea class="form-control form-control-sm" name="popover_text" id="popover_text">
                  <xsl:value-of select="//popovers/record/popover_text"/>
                </textarea>
              </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>
            <button type="button" class="btn btn-sm btn-primary me-2 btnDelete"><i class="bi bi-trash3 me-2"/>Delete</button>
          </div>
          
        </div>
        
      </div>
      
    </div>
          
  </xsl:template>

</xsl:stylesheet>
