<?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"/>

    <xsl:template match="/">

        <!-- Permit Record Modal Dialog (Bootstrap 5) -->
        <div class="modal fade" id="permit-details-dialog" tabindex="-1" aria-labelledby="permit-details-title" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-scrollable">
                <div class="modal-content">

                    <div class="modal-header bg-primary">
                        <h5 class="modal-title text-white" id="permit-details-title">
                            <xsl:value-of select="//permit/record/permit_sub_div_name"/>
                            <xsl:text> - </xsl:text>
                            <xsl:value-of select="concat(//permit/record/permit_project_addr, ' ', //permit/record/permit_project_city, ' ', //permit/record/permit_project_state)"/>
                        </h5>

                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <div class="modal-body">

                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label">Permit Number</label>
                                <p class="mb-0">
                                    <xsl:value-of select="//permit/record/permit_permit_number"/>
                                </p>
                            </div>

                            <div class="col-md-4">
                                <label class="form-label">Permit Date</label>
                                <p class="mb-0">
                                    <xsl:value-of select="//permit/record/permit_permit_date_verbose"/>
                                </p>
                            </div>

                            <div class="col-md-4">
                                <label class="form-label">Entry Date</label>
                                <p class="mb-0">
                                    <xsl:value-of select="//permit/record/permit_entry_date_verbose"/>
                                </p>
                            </div>
                        </div>
                        
                        <hr class="my-3"/>
                        
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label">Value</label>
                                <p class="mb-0">
                                    <xsl:value-of select="//permit/record/permit_value_verbose"/>
                                </p>
                            </div>

                            <div class="col-md-4">
                                <label class="form-label">Square Footage</label>
                                <p class="mb-0">
                                    <xsl:value-of select="//permit/record/permit_size_verbose"/>
                                </p>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Project Type</label>
                                <p class="mb-0">
                                    <xsl:value-of select="//permit/record/permit_project_type"/>
                                </p>
                            </div>
                            <!--                            <div class="col-md-3">
                                <label class="form-label">Work Type</label>
                                <p class="mb-0">
                                    <xsl:value-of select="//permit/record/permit_work_type_verbose"/>
                                </p>
                            </div>-->
                        </div>

                        <hr class="my-3"/>

                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Project Address</label>
                                <p class="mb-0">
                                    <xsl:value-of select="concat(//permit/record/permit_project_addr, ' ', //permit/record/permit_project_city, ', ', //permit/record/permit_project_state, ' ', //permit/record/permit_zip)"/>
                                </p>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Owner Address</label>
                                <p class="mb-0">
                                    <xsl:value-of select="concat(//permit/record/permit_owner_address, ' ', //permit/record/permit_owner_city, ', ', //permit/record/permit_owner_state, ' ', //permit/record/permit_owner_zip)"/>
                                </p>
                            </div>
                        </div>

                        <hr class="my-3"/>

                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Company</label>
                                <p class="mb-0">
                                    <xsl:value-of select="//permit/record/permit_company"/>
                                </p>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Project Name</label>
                                <p class="mb-0">
                                    <xsl:value-of select="//permit/record/permit_sub_div_name"/>
                                </p>
                            </div>
                        </div>

                        <hr class="my-3"/>

                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">County</label>
                                <p class="mb-0">
                                    <xsl:value-of select="//permit/record/permit_county"/>
                                </p>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Owner Name</label>
                                <p class="mb-0">
                                    <xsl:value-of select="//permit/record/permit_owner_name"/>
                                </p>
                            </div>
                        </div>

                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-sm btn-primary me-auto" data-bs-dismiss="modal">Close</button>
                    </div>

                </div>
            </div>
        </div>

    </xsl:template>
</xsl:stylesheet>