Files
front.admin/src/apps-invoice-generator.html
2022-04-12 07:26:41 +02:00

645 lines
29 KiB
HTML

<!DOCTYPE html>
<html lang="@@languageDirection.lang">
<head>
<!-- Required Meta Tags Always Come First -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Title -->
<title>Invoice Generator | Front - Admin &amp; Dashboard Template</title>
<!-- Favicon -->
<link rel="shortcut icon" href="@@autopath/favicon.ico">
<!-- Font -->
<link href="@@vars.themeFont" rel="stylesheet">
<!-- CSS Implementing Plugins -->
<!-- bundlecss:vendor [@@autopath] -->
<link rel="stylesheet" href="@@autopath/node_modules/bootstrap-icons/font/bootstrap-icons.css">
@@if(layoutBuilder.header.layoutMode !== 'default') {
<link rel="stylesheet" href="@@autopath/assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.css">
}
<link rel="stylesheet" href="@@autopath/node_modules/tom-select/dist/css/tom-select.bootstrap5.css">
<link rel="stylesheet" href="@@autopath/node_modules/flatpickr/dist/flatpickr.min.css">
<!-- CSS Front Template -->
<!-- bundlecss:theme [@@autopath] @@vars.version -->
@@if(layoutBuilder.extend.switcherSupport === false) {
<link rel="stylesheet" href="@@autopath/assets/css/theme@@if(themeAppearance.layoutSkin === 'dark'){-dark}.css">
}
@@if(layoutBuilder.extend.switcherSupport === true) {
<link rel="preload" href="@@autopath/assets/css/theme.css" data-hs-appearance="default" as="style">
<link rel="preload" href="@@autopath/assets/css/theme-dark.css" data-hs-appearance="dark" as="style">
<style data-hs-appearance-onload-styles>
* {
transition: unset !important;
}
body {
opacity: 0;
}
</style>
}
</head>
<body class="@@if(layoutBuilder.header.layoutMode === 'default'){has-navbar-vertical-aside navbar-vertical-aside-show-xl} @@if(layoutBuilder.sidebarLayout === 'compact'){navbar-vertical-aside-compact-mode navbar-vertical-aside-compact-mini-mode} @@if(layoutBuilder.sidebarLayout === 'mini'){navbar-vertical-aside-mini-mode} footer-offset">
@@if(layoutBuilder.extend.switcherSupport === true) {
<script src="@@autopath/assets/js/hs.theme-appearance.js"></script>
}
@@if(layoutBuilder.sidebarLayout !== 'compact' && layoutBuilder.sidebarLayout !== 'mini') {
<script src="@@autopath/assets/vendor/hs-navbar-vertical-aside/dist/hs-navbar-vertical-aside-mini-cache.js"></script>
}
<!-- ========== HEADER ========== -->
@@if(layoutBuilder.header.layoutMode === 'default') {
@@include("@@autopath/partials/navbar/main.html")
}
@@if(layoutBuilder.header.layoutMode === 'single') {
@@if(layoutBuilder.header.containerMode === 'container') {
@@include("@@autopath/partials/navbar/main-container.html")
}
}
@@if(layoutBuilder.header.layoutMode === 'double') {
@@if(layoutBuilder.header.containerMode === 'container') {
@@include("@@autopath/partials/navbar/double-line-container.html")
}
}
<!-- ========== END HEADER ========== -->
<!-- ========== MAIN CONTENT ========== -->
<!-- Navbar Vertical -->
@@if(layoutBuilder.sidebarLayout !== 'compact' && layoutBuilder.header.layoutMode === 'default') {
@@include("@@autopath/partials/sidebar/main.html", {
"category": "apps",
"subcategory": "",
"link": "apps-invoice-generator.html"
})
}
@@if(layoutBuilder.sidebarLayout === 'compact' && layoutBuilder.header.layoutMode === 'default') {
@@include("@@autopath/partials/sidebar/compact.html", {
"category": "apps",
"subcategory": "",
"link": "apps-invoice-generator.html"
})
}
<main id="content" role="main" class="main">
<!-- Content -->
<div class="content @@layoutBuilder.header.containerMode">
<div class="row">
<div class="col-lg-9 mb-5 mb-lg-0">
<!-- Card -->
<div class="card card-lg">
<!-- Body -->
<div class="card-body">
<div class="row justify-content-md-between">
<div class="col-md-4 mb-3 mb-md-0">
<!-- Logo -->
<label class="form-check form-check-dashed" for="logoUploader">
<img id="logoImg" class="avatar avatar-xl avatar-4x3 avatar-centered h-100 mb-2" src="@@autopath/assets/svg/illustrations/oc-browse-file.svg" alt="Image Description" data-hs-theme-appearance="default">
<img id="logoImg" class="avatar avatar-xl avatar-4x3 avatar-centered h-100 mb-2" src="@@autopath/assets/svg/illustrations-light/oc-browse-file.svg" alt="Image Description" data-hs-theme-appearance="dark">
<span class="d-block">Browse your file here</span>
<input type="file" class="js-file-attach form-check-input" id="logoUploader"
data-hs-file-attach-options='{
"textTarget": "#logoImg",
"mode": "image",
"targetAttr": "src",
"allowTypes": [".png", ".jpeg", ".jpg"]
}'>
</label>
<!-- End Logo -->
</div>
<!-- End Col -->
<div class="col-md-5 text-md-end">
<h2>Invoice #</h2>
<!-- Form -->
<div class="d-grid d-md-flex justify-content-md-end mb-2 mb-md-4">
<input type="text" class="form-control w-auto" placeholder="" aria-label="" value="0982131">
</div>
<!-- End Form -->
<textarea class="form-control" placeholder="Who is this invoice from?" id="invoiceAddressFromLabel" aria-label="Who is this invoice from?" rows="3"></textarea>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<hr class="my-5">
<div class="row mb-3">
<div class="col-md-5">
<!-- Form -->
<div class="mb-4">
<label for="invoiceAddressToLabel" class="form-label">Bill to:</label>
<textarea class="form-control" placeholder="Who is this invoice from?" id="invoiceAddressToLabel" aria-label="Who is this invoice from?" rows="3"></textarea>
</div>
<!-- End Form -->
</div>
<!-- End Col -->
<div class="col-md-7 align-self-md-end">
<!-- Form -->
<div class="mb-4">
<dl class="row align-items-sm-center mb-3">
<dt class="col-md text-sm-end mb-2 mb-sm-0">Invoice date:</dt>
<dd class="col-md-auto mb-0">
<!-- Flatpickr -->
<div id="invoiceDateFlatpickr" class="js-flatpickr flatpickr-custom"
data-hs-flatpickr-options='{
"appendTo": "#invoiceDateFlatpickr",
"dateFormat": "d/m/Y",
"wrap": true
}'>
<input type="text" class="flatpickr-custom-form-control form-control" placeholder="Select dates" data-input value="29/06/2020">
</div>
<!-- End Flatpickr -->
</dd>
</dl>
<dl class="row align-items-sm-center">
<dt class="col-md text-sm-end mb-2 mb-sm-0">Due date:</dt>
<dd class="col-md-auto mb-0">
<!-- Flatpickr -->
<div id="invoiceDueDateFlatpickr" class="js-flatpickr flatpickr-custom"
data-hs-flatpickr-options='{
"appendTo": "#invoiceDueDateFlatpickr",
"dateFormat": "d/m/Y",
"wrap": true
}'>
<input type="text" class="flatpickr-custom-form-control form-control" placeholder="Select dates" data-input value="29/06/2020">
</div>
<!-- End Flatpickr -->
</dd>
</dl>
</div>
<!-- End Form -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<div class="js-add-field"
data-hs-add-field-options='{
"template": "#addInvoiceItemTemplate",
"container": "#addInvoiceItemContainer",
"defaultCreated": 0
}'>
<!-- Title -->
<div class="bg-light border-bottom p-2 mb-3">
<div class="row">
<div class="col-sm-5">
<h6 class="card-title text-cap">Item</h6>
</div>
<!-- End Col -->
<div class="col-sm-3 d-none d-sm-inline-block">
<h6 class="card-title text-cap">Quantity</h6>
</div>
<!-- End Col -->
<div class="col-sm-2 d-none d-sm-inline-block">
<h6 class="card-title text-cap">Rate</h6>
</div>
<!-- End Col -->
<div class="col-sm-2 d-none d-sm-inline-block">
<h6 class="card-title text-cap">Amount</h6>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Title -->
<!-- Content -->
<div class="row">
<div class="col-md-5">
<input type="text" class="form-control mb-3" placeholder="Item name" aria-label="Item name">
<input type="text" class="form-control mb-3" placeholder="Description" aria-label="Description">
</div>
<!-- End Col -->
<div class="col-12 col-sm-auto col-md-3">
<!-- Quantity -->
<div class="quantity-counter mb-3">
<div class="js-quantity-counter row align-items-center">
<div class="col">
<input class="js-result form-control form-control-quantity-counter" type="text" value="1">
</div>
<!-- End Col -->
<div class="col-auto">
<a class="js-minus btn btn-white btn-xs btn-icon rounded-circle" href="javascript:;">
<svg width="8" height="2" viewBox="0 0 8 2" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 1C0 0.723858 0.223858 0.5 0.5 0.5H7.5C7.77614 0.5 8 0.723858 8 1C8 1.27614 7.77614 1.5 7.5 1.5H0.5C0.223858 1.5 0 1.27614 0 1Z" fill="currentColor"/>
</svg>
</a>
<a class="js-plus btn btn-white btn-xs btn-icon rounded-circle" href="javascript:;">
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 0C4.27614 0 4.5 0.223858 4.5 0.5V3.5H7.5C7.77614 3.5 8 3.72386 8 4C8 4.27614 7.77614 4.5 7.5 4.5H4.5V7.5C4.5 7.77614 4.27614 8 4 8C3.72386 8 3.5 7.77614 3.5 7.5V4.5H0.5C0.223858 4.5 0 4.27614 0 4C0 3.72386 0.223858 3.5 0.5 3.5H3.5V0.5C3.5 0.223858 3.72386 0 4 0Z" fill="currentColor"/>
</svg>
</a>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Quantity -->
</div>
<!-- End Col -->
<div class="col-12 col-sm col-md-2">
<!-- Input Group -->
<div class="mb-3">
<input type="number" class="form-control" placeholder="00" aria-label="00">
</div>
<!-- End Input Group -->
</div>
<!-- End Col -->
<div class="col col-md-2">
<input type="number" class="form-control-plaintext mb-3" placeholder="$0.00" aria-label="$0.00">
</div>
<!-- End Col -->
</div>
<!-- End Content -->
<!-- Container For Input Field -->
<div id="addInvoiceItemContainer"></div>
<a href="javascript:;" class="js-create-field form-link">
<i class="bi-plus"></i> Add item
</a>
<!-- Add Phone Input Field -->
<div id="addInvoiceItemTemplate" style="display: none;">
<!-- Content -->
<div class="input-group-add-field">
<div class="row">
<div class="col-md-5">
<input type="text" class="form-control mb-3" placeholder="Item name" aria-label="Item name">
<input type="text" class="form-control mb-3" placeholder="Description" aria-label="Description">
</div>
<!-- End Col -->
<div class="col-12 col-sm-auto col-md-3">
<!-- Quantity -->
<div class="quantity-counter mb-3">
<div class="js-quantity-counter row align-items-center">
<div class="col">
<input class="js-result form-control form-control-quantity-counter" type="text" value="1">
</div>
<!-- End Col -->
<div class="col-auto">
<a class="js-minus btn btn-white btn-xs btn-icon rounded-circle" href="javascript:;">
<svg width="8" height="2" viewBox="0 0 8 2" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 1C0 0.723858 0.223858 0.5 0.5 0.5H7.5C7.77614 0.5 8 0.723858 8 1C8 1.27614 7.77614 1.5 7.5 1.5H0.5C0.223858 1.5 0 1.27614 0 1Z" fill="currentColor"/>
</svg>
</a>
<a class="js-plus btn btn-white btn-xs btn-icon rounded-circle" href="javascript:;">
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 0C4.27614 0 4.5 0.223858 4.5 0.5V3.5H7.5C7.77614 3.5 8 3.72386 8 4C8 4.27614 7.77614 4.5 7.5 4.5H4.5V7.5C4.5 7.77614 4.27614 8 4 8C3.72386 8 3.5 7.77614 3.5 7.5V4.5H0.5C0.223858 4.5 0 4.27614 0 4C0 3.72386 0.223858 3.5 0.5 3.5H3.5V0.5C3.5 0.223858 3.72386 0 4 0Z" fill="currentColor"/>
</svg>
</a>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Quantity -->
</div>
<!-- End Col -->
<div class="col-12 col-sm col-md-2">
<!-- Input Group -->
<div class="mb-3">
<input type="number" class="form-control" placeholder="00" aria-label="00">
</div>
<!-- End Input Group -->
</div>
<!-- End Col -->
<div class="col col-md-2">
<input type="number" class="form-control-plaintext mb-3" placeholder="$0.00" aria-label="$0.00">
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<a class="js-delete-field input-group-add-field-delete" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Remove item">
<i class="bi-x-lg"></i>
</a>
</div>
<!-- End Content -->
</div>
<!-- End Add Phone Input Field -->
</div>
<hr class="my-5">
<div class="row justify-content-md-end mb-3">
<div class="col-md-auto">
<dl class="row text-md-end">
<dt class="col-md-6">Subtotal:</dt>
<dd class="col-md-6">$0.00</dd>
<dt class="col-md-6">Total:</dt>
<dd class="col-md-6">$0.00</dd>
<dt class="col-md-6 mb-1 mb-md-0">Tax:</dt>
<dd class="col-md-6">
<!-- Input Group -->
<div class="tom-select-custom tom-select-custom-end">
<div id="taxSelect" class="input-group">
<input type="number" class="form-control" placeholder="0.00" aria-label="0.00" style="min-width: 5rem;">
<!-- Select -->
<select class="js-select form-select"
data-hs-tom-select-options='{
"searchInDropdown": false,
"hideSearch": true,
"dropdownWidth": "9rem"
}'>
<option value="discount2Filter1">Flat ($)</option>
<option value="discount2Filter2" selected>Percent (%)</option>
</select>
<!-- End Select -->
</div>
</div>
<!-- End Input Group -->
</dd>
<dt class="col-md-6 mb-1 mb-md-0">Amount paid:</dt>
<dd class="col-md-6">
<!-- Input Group -->
<div class="input-group input-group-merge">
<div class="input-group-prepend input-group-text">
<i class="bi-currency-dollar"></i>
</div>
<input type="number" class="form-control" placeholder="0.00" aria-label="0.00">
</div>
<!-- End Input Group -->
</dd>
<dt class="col-md-6">Due balance:</dt>
<dd class="col-md-6">$0.00</dd>
</dl>
<!-- End Row -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<!-- Form -->
<div class="mb-4">
<label for="invoiceNotesLabel" class="form-label">Notes &amp; terms</label>
<textarea class="form-control" placeholder="Who is this invoice to?" id="invoiceNotesLabel" aria-label="Who is this invoice to?" rows="3"></textarea>
</div>
<!-- End Form -->
<p class="fs-6 mb-0">&copy; Front. 2020 Htmlstream.</p>
</div>
<!-- End Body -->
</div>
<!-- End Card -->
<!-- Sticky Block End Point -->
<div id="stickyBlockEndPoint"></div>
</div>
<div class="col-lg-3">
<div id="stickyBlockStartPoint">
<div class="js-sticky-block"
data-hs-sticky-block-options='{
"parentSelector": "#stickyBlockStartPoint",
"breakpoint": "lg",
"startPoint": "#stickyBlockStartPoint",
"endPoint": "#stickyBlockEndPoint",
"stickyOffsetTop": 20
}'>
<div class="d-grid gap-2 gap-sm-3 mb-2 mb-sm-3">
<a class="btn btn-primary" href="javascript:;">
<i class="bi-cursor-fill me-1"></i> Send invoice
</a>
<a class="btn btn-white" href="javascript:;">
<i class="bi-download me-1"></i> Download
</a>
</div>
<div class="row gx-3">
<div class="col-sm mb-2 mb-sm-0">
<div class="d-grid">
<a class="btn btn-white" href="javascript:;">Preview</a>
</div>
</div>
<!-- End Col -->
<div class="col-sm">
<div class="d-grid">
<a class="btn btn-white" href="javascript:;">Save</a>
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<hr class="my-4">
<!-- Form -->
<div class="mb-4">
<label for="currencyLabel" class="form-label">Currency</label>
<!-- Select -->
<div class="tom-select-custom">
<select class="js-select form-select" id="currencyLabel" autocomplete="off"
data-hs-tom-select-options='{
"searchInDropdown": false,
"hideSearch": true
}'>
<option label="empty"></option>
<option value="currency1" selected data-option-template='<span class="d-flex align-items-center text-truncate"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/us.svg" alt="Image description" width="16"/><span>USD (United States Dollar)</span></span>'>USD (United States Dollar)</option>
<option value="currency2" data-option-template='<span class="d-flex align-items-center text-truncate"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gb.svg" alt="Image description" width="16"/><span>GBP (United Kingdom Pound)</span></span>'>GBP (United Kingdom Pound)</option>
<option value="currency3" data-option-template='<span class="d-flex align-items-center text-truncate"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/eu.svg" alt="Image description" width="16"/><span>Euro (Euro Member Countries)</span></span>'>Euro (Euro Member Countries)</option>
</select>
</div>
<!-- End Select -->
</div>
<!-- End Form -->
<div class="d-grid gap-3">
<!-- Form Switch -->
<label class="row form-check form-switch" for="invoicePaymentTermsSwitch">
<span class="col-8 col-sm-9 ms-0">Payment terms</span>
<span class="col-4 col-sm-3 text-end">
<input type="checkbox" class="form-check-input" id="invoicePaymentTermsSwitch" checked>
</span>
</label>
<!-- End Form Switch -->
<!-- Form Switch -->
<label class="row form-check form-switch" for="invoiceClientNotesSwitch">
<span class="col-8 col-sm-9 ms-0">Client notes</span>
<span class="col-4 col-sm-3 text-end">
<input type="checkbox" class="form-check-input" id="invoiceClientNotesSwitch" checked>
</span>
</label>
<!-- End Form Switch -->
<!-- Form Switch -->
<label class="row form-check form-switch" for="invoiceAttachPDFSwitch">
<span class="col-8 col-sm-9 ms-0">Attach PDF in mail</span>
<span class="col-4 col-sm-3 text-end">
<input type="checkbox" class="form-check-input" id="invoiceAttachPDFSwitch">
</span>
</label>
<!-- End Form Switch -->
</div>
</div>
</div>
</div>
</div>
<!-- End Row -->
</div>
<!-- End Content -->
<!-- Footer -->
@@if(layoutBuilder.header.containerMode === 'container-fluid') {
@@include("@@autopath/partials/footer/main.html")
}
@@if(layoutBuilder.header.containerMode === 'container') {
@@include("@@autopath/partials/footer/container.html")
}
<!-- End Footer -->
</main>
<!-- ========== END MAIN CONTENT ========== -->
<!-- ========== SECONDARY CONTENTS ========== -->
<!-- Keyboard Shortcuts -->
@@include("@@autopath/partials/layouts-components/offcanvas-shortcuts.html")
<!-- End Keyboard Shortcuts -->
<!-- Activity -->
@@include("@@autopath/partials/layouts-components/offcanvas-activity.html")
<!-- End Activity -->
<!-- Welcome Message Modal -->
@@include("@@autopath/partials/modals/welcome-message.html")
<!-- End Welcome Message Modal -->
<!-- Share with people Modal -->
@@include("@@autopath/partials/modals/share-with-people.html")
<!-- End Share with people Modal -->
<!-- ========== END SECONDARY CONTENTS ========== -->
<!-- JS Global Compulsory @@deleteLine:build -->
<script src="@@autopath/node_modules/jquery/dist/jquery.min.js"></script>
<script src="@@autopath/node_modules/jquery-migrate/dist/jquery-migrate.min.js"></script>
<script src="@@autopath/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- JS Implementing Plugins -->
<!-- bundlejs:vendor [@@autopath] -->
<script src="@@autopath/assets/vendor/hs-navbar-vertical-aside/dist/hs-navbar-vertical-aside.min.js"></script>
<script src="@@autopath/assets/vendor/hs-form-search/dist/hs-form-search.min.js"></script>
@@if(layoutBuilder.header.layoutMode !== 'default') {
<script src="@@autopath/assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.js"></script>
}
<script src="@@autopath/assets/vendor/hs-add-field/dist/hs-add-field.min.js"></script>
<script src="@@autopath/assets/vendor/hs-file-attach/dist/hs-file-attach.min.js"></script>
<script src="@@autopath/assets/vendor/hs-quantity-counter/dist/hs-quantity-counter.min.js"></script>
<script src="@@autopath/assets/vendor/hs-sticky-block/dist/hs-sticky-block.min.js"></script>
<script src="@@autopath/node_modules/tom-select/dist/js/tom-select.complete.min.js"></script>
<script src="@@autopath/node_modules/flatpickr/dist/flatpickr.min.js"></script>
<!-- JS Front -->
<!-- bundlejs:theme [@@autopath] -->
<script src="@@autopath/assets/js/hs.core.js"></script>
<script src="@@autopath/assets/js/hs.bs-dropdown.js"></script>
<script src="@@autopath/assets/js/hs.tom-select.js"></script>
<script src="@@autopath/assets/js/hs.flatpickr.js"></script>
<!-- JS Plugins Init. -->
<script>
(function() {
window.onload = function () {
@@if(layoutBuilder.header.layoutMode !== 'default') {
// INITIALIZATION OF MEGA MENU
// =======================================================
new HSMegaMenu('.js-mega-menu', {
desktop: {
position: 'left'
}
})
}
// INITIALIZATION OF NAVBAR VERTICAL ASIDE
// =======================================================
new HSSideNav('.js-navbar-vertical-aside').init()
// INITIALIZATION OF FORM SEARCH
// =======================================================
new HSFormSearch('.js-form-search')
// INITIALIZATION OF BOOTSTRAP DROPDOWN
// =======================================================
HSBsDropdown.init()
// INITIALIZATION OF ADD FIELD
// =======================================================
new HSAddField('.js-add-field', {
addedField: field => {
new HSQuantityCounter(field.querySelector('.js-quantity-counter'))
}
})
// INITIALIZATION OF SELECT
// =======================================================
HSCore.components.HSTomSelect.init('.js-select')
// INITIALIZATION OF FILE ATTACH
// =======================================================
new HSFileAttach('.js-file-attach')
// INITIALIZATION OF QUANTITY COUNTER
// =======================================================
new HSQuantityCounter('.js-quantity-counter')
// INITIALIZATION OF STICKY BLOCKS
// =======================================================
new HSStickyBlock('.js-sticky-block', {
targetSelector: document.getElementById('header').classList.contains('navbar-fixed') ? '#header' : null
})
// INITIALIZATION OF FLATPICKR
// =======================================================
HSCore.components.HSFlatpickr.init('.js-flatpickr')
}
})()
</script>
<!-- Style Switcher JS -->
@@if(layoutBuilder.extend.switcherSupport === true) {
@@include("@@autopath/partials/layouts-components/darkmode-switcher-js.html")
}
<!-- End Style Switcher JS -->
</body>
</html>