<?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 Subscription</xsl:param>
    <xsl:param name="PAGE-NAME">editSubscription</xsl:param>

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

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

                        <input type="hidden" name="action" value="Subscriptions.editSubscription"/>
                        <input type="hidden" name="step"   value="update"/>
            
                        <input type="hidden" name="subscription_serial" id="subscription_serial" value="{//subscriptions/record/subscription_serial}"/>
                        
                        <div class="row">

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

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

                            <div class="col-lg-5 mb-3">
                                <label class="form-label" for="subscription_description">Description</label>
                                <input type="text" class="form-control form-control-sm" name="subscription_description" id="subscription_description" maxlength="128" autocomplete="off" value="{//subscriptions/record/subscription_description}"/>
                            </div>

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

                            <div class="col-lg-5 mb-3">
                                <label class="form-label" for="subscription_projecttype">Project Type</label>
                                <select class="form-control form-control-sm search-dropdown" name="subscription_projecttype" id="subscription_projecttype" size="1">
                                    <xsl:apply-templates select="//Constants/ProjectTypes"/>
                                </select>
                            </div>

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

                            <div class="col-lg-5 mb-3">
                                <label class="form-label" for="subscription_area">Area</label>
                                <select class="form-control form-control-sm search-dropdown" name="subscription_area" id="subscription_area" size="1">
                                    <xsl:apply-templates select="//Constants/Areas"/>
                                </select>
                            </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-trash me-2"/>Delete</button>
                    </div>
          
                </div>
        
            </div>
      
        </div>
          
    </xsl:template>
    
    <!-- Template for Project Type dropdown -->

    <xsl:template match="Constants/ProjectTypes">
    
        <option value="">Choose...</option>
    
        <xsl:for-each select="ProjectType"> 
            <xsl:sort select="."/>
            <option value="{.}" data-tokens="{.}">
                <xsl:if test=". = //subscriptions/record/subscription_projecttype">
                    <xsl:attribute name="selected"/>
                </xsl:if>
                <xsl:value-of select="." />
            </option>
        </xsl:for-each>
    
    </xsl:template>
    
    <!-- Template for Areas dropdown -->

    <xsl:template match="Constants/Areas">
    
        <option value="">Choose...</option>
    
        <xsl:for-each select="Area"> 
            <xsl:sort select="."/>
            <option value="{.}" data-tokens="{.}">
                <xsl:if test=". = //subscriptions/record/subscription_area">
                    <xsl:attribute name="selected"/>
                </xsl:if>
                <xsl:value-of select="." />
            </option>
        </xsl:for-each>
    
    </xsl:template>

</xsl:stylesheet>
