{{define "config"}}
<!DOCTYPE html>
<html lang="en">
<head>
    {{template "head-common" .}}
    <title>{{.Title}}</title>
</head>
<body class="bg-gray-900 text-gray-100">
    {{template "accessibility-common" .}}
    {{template "main-layout-start" .}}
    {{template "config-content" .}}
    {{template "main-layout-end" .}}
    {{template "body-common-scripts" .}}
    <script>
        // Toast notification function
        function showToast(message, type = 'error') {
            const toast = document.createElement('div');
            toast.className = `fixed bottom-4 right-4 p-4 rounded-lg shadow-lg z-50 flex items-center gap-2 ${type === 'error' ? 'bg-red-600' : 'bg-green-600'} text-white`;
            toast.innerHTML = `<i class="bx ${type === 'error' ? 'bx-error-circle' : 'bx-check-circle'}"></i><span>${message}</span>`;
            document.body.appendChild(toast);
            setTimeout(() => {
                toast.style.opacity = '0';
                toast.style.transition = 'opacity 0.3s';
                setTimeout(() => toast.remove(), 300);
            }, 5000);
        }

        function applySettings(button) {
            const originalContent = button.innerHTML;
            button.disabled = true;
            button.innerHTML = '<i class="bx bx-loader-alt bx-spin"></i> Applying...';

            const videoOutputDriver = document.getElementById('video-output-driver').value;
            const profile = document.getElementById('profile').value;
            const videoScaleFilter = document.getElementById('video-scale-filter').value;
            const savePositionOnQuit = document.getElementById('save-position-on-quit').value;
            const border = document.getElementById('border').value;

            fetch('/api/config/apply', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    video_output_driver: videoOutputDriver,
                    profile: profile,
                    video_scale_filter: videoScaleFilter,
                    save_position_on_quit: savePositionOnQuit,
                    border: border,
                    screenshot_format: document.getElementById('screenshot-format').value,
                    screenshot_tag_colorspace: document.getElementById('screenshot-tag-colorspace').value,
                    screenshot_high_bit_depth: document.getElementById('screenshot-high-bit-depth').value,
                    screenshot_template: document.getElementById('screenshot-template').value,
                    screenshot_directory: document.getElementById('screenshot-directory').value,
                    screenshot_jpeg_quality: document.getElementById('screenshot-jpeg-quality').value,
                    screenshot_png_compression: document.getElementById('screenshot-png-compression').value,
                    screenshot_webp_lossless: document.getElementById('screenshot-webp-lossless').value,
                    screenshot_webp_quality: document.getElementById('screenshot-webp-quality').value,
                    screenshot_jxl_distance: document.getElementById('screenshot-jxl-distance').value,
                    screenshot_avif_encoder: document.getElementById('screenshot-avif-encoder').value,
                    screenshot_avif_pixfmt: document.getElementById('screenshot-avif-pixfmt').value,
                    screenshot_avif_opts: document.getElementById('screenshot-avif-opts').value
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    showToast('Settings applied successfully!', 'success');

                    setTimeout(() => {
                        location.reload();
                    }, 1500);
                } else {
                    button.disabled = false;
                    button.innerHTML = originalContent;
                    showToast('Failed to apply settings: ' + (data.message || 'Unknown error'), 'error');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                button.disabled = false;
                button.innerHTML = originalContent;
                showToast('Failed to apply settings: ' + error.message, 'error');
            });
        }

        document.getElementById('apply-settings-btn').addEventListener('click', function() { applySettings(this); });
    </script>
</body>
</html>
{{end}}

{{define "config-content"}}
<div class="space-y-6">
    <div class="mb-6 flex items-start justify-between">
        <div>
            <h2 class="text-3xl font-bold text-white">MPV Config Management</h2>
            <p class="text-gray-400 mt-1">Edit MPV settings, manage backups, and reset configuration</p>
        </div>
        <button class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg transition flex items-center gap-2 font-medium shrink-0"
                id="apply-settings-btn">
            <i class="bx bx-save"></i>
            Apply Settings
        </button>
    </div>

    <div class="bg-gray-800 rounded-lg p-6 mb-6">
        <h3 class="text-xl font-semibold text-purple-400 mb-4">Additional Settings</h3>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-300 mb-2">Video Output Driver</label>
                <select id="video-output-driver" name="video_output_driver"
                        class="w-full bg-gray-700 text-white rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
                    <option value="gpu-next" {{if eq .Config.VideoOutputDriver "gpu-next"}}selected{{end}}>GPU Next (Recommended)</option>
                    <option value="gpu" {{if eq .Config.VideoOutputDriver "gpu"}}selected{{end}}>GPU</option>
                    <option value="vulkan" {{if eq .Config.VideoOutputDriver "vulkan"}}selected{{end}}>Vulkan</option>
                    <option value="opengl" {{if eq .Config.VideoOutputDriver "opengl"}}selected{{end}}>OpenGL</option>
                </select>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-300 mb-2">Profile</label>
                <select id="profile" name="profile"
                        class="w-full bg-gray-700 text-white rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
                    <option value="high-quality" {{if eq .Config.Profile "high-quality"}}selected{{end}}>High Quality (Recommended)</option>
                    <option value="fast" {{if eq .Config.Profile "fast"}}selected{{end}}>Fast (for slow computers)</option>
                    <option value="low-latency" {{if eq .Config.Profile "low-latency"}}selected{{end}}>Low Latency</option>
                    <option value="sw-fast" {{if eq .Config.Profile "sw-fast"}}selected{{end}}>Software Fast</option>
                </select>
                <p class="text-xs text-gray-400 mt-1">Quality preset. High-quality is best for most users.</p>
            </div>

            <div class="md:col-span-2">
                <label class="block text-sm font-medium text-gray-300 mb-2">Video Scale Filter</label>
                <select id="video-scale-filter" name="video_scale_filter"
                        class="w-full bg-gray-700 text-white rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
                    <option value="ewa_lanczossharp" {{if eq .Config.VideoScaleFilter "ewa_lanczossharp"}}selected{{end}}>Lanczos Sharp (Recommended)</option>
                    <option value="bicubic" {{if eq .Config.VideoScaleFilter "bicubic"}}selected{{end}}>Bicubic</option>
                    <option value="spline16" {{if eq .Config.VideoScaleFilter "spline16"}}selected{{end}}>Spline16</option>
                    <option value="spline36" {{if eq .Config.VideoScaleFilter "spline36"}}selected{{end}}>Spline36</option>
                    <option value="spline64" {{if eq .Config.VideoScaleFilter "spline64"}}selected{{end}}>Spline64</option>
                </select>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-300 mb-2">Save Position on Quit</label>
                <select id="save-position-on-quit" name="save_position_on_quit"
                        class="w-full bg-gray-700 text-white rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
                    <option value="no" {{if eq .Config.SavePositionOnQuit "no"}}selected{{end}}>No (Default)</option>
                    <option value="yes" {{if eq .Config.SavePositionOnQuit "yes"}}selected{{end}}>Yes</option>
                </select>
                <p class="text-xs text-gray-400 mt-1">When enabled, MPV remembers your playback position. Resume where you left off next time.</p>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-300 mb-2">Window Decoration</label>
                <select id="border" name="border"
                        class="w-full bg-gray-700 text-white rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
                    <option value="yes" {{if eq .Config.Border "yes"}}selected{{end}}>Yes (Default)</option>
                    <option value="no" {{if eq .Config.Border "no"}}selected{{end}}>No</option>
                </select>
                <p class="text-xs text-gray-400 mt-1">Use native OS window controls (Yes) or MPV's stylized borderless window (No).</p>
            </div>
        </div>
    </div>

    <div class="border-t border-gray-700 my-6"></div>

    <div class="bg-gray-800 rounded-lg p-6 mb-6">
        <h3 class="text-xl font-semibold text-purple-400 mb-4">Screenshot Settings</h3>

        <div class="bg-blue-900/30 border border-blue-700 rounded-lg p-4 mb-6">
            <p class="text-sm text-blue-200">
                <i class="bx bx-info-circle mr-2"></i>
                To take a screenshot, press <kbd class="bg-gray-700 px-2 py-1 rounded text-xs font-mono">S</kbd> and it will be saved to screenshot folder.
            </p>
        </div>

        <div class="space-y-6">
            <!-- Screenshot Format (Standalone - Primary Option) -->
            <div>
                <label class="block text-sm font-medium text-gray-300 mb-2">Screenshot Format</label>
                <select id="screenshot-format" name="screenshot_format"
                        class="w-full bg-gray-700 text-white rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
                    <option value="jxl" {{if eq .Config.ScreenshotFormat "jxl"}}selected{{end}}>JPEG XL</option>
                    <option value="avif" {{if eq .Config.ScreenshotFormat "avif"}}selected{{end}}>AVIF (Recommended)</option>
                    <option value="webp" {{if eq .Config.ScreenshotFormat "webp"}}selected{{end}}>WebP (Recommended - Default)</option>
                    <option value="png" {{if eq .Config.ScreenshotFormat "png"}}selected{{end}}>PNG</option>
                    <option value="jpeg" {{if eq .Config.ScreenshotFormat "jpeg"}}selected{{end}}>JPEG</option>
                </select>
                <p class="text-xs text-gray-400 mt-1">Image format for screenshots. WebP and AVIF offer greater compression with high quality (or lossless quality) and universal compatibility. JPEG XL is still experimental on the web.</p>
            </div>

            <!-- File Location Group -->
            <div class="bg-gray-700 rounded-lg p-4">
                <h4 class="text-md font-semibold text-white mb-3">File Location</h4>
                <div class="grid grid-cols-2 gap-4">
                    <!-- Screenshot Directory -->
                    <div>
                        <label class="block text-sm font-medium text-gray-300 mb-2">Screenshot Directory</label>
                        <input type="text" id="screenshot-directory" name="screenshot_directory"
                               value="{{.Config.ScreenshotDirectory}}"
                               placeholder="Current directory"
                               class="w-full bg-gray-600 text-white rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
                        <p class="text-xs text-gray-400 mt-1">Leave empty for current directory.</p>
                    </div>

                    <!-- Screenshot Template -->
                    <div>
                        <label class="block text-sm font-medium text-gray-300 mb-2">Screenshot Filename Template</label>
                        <input type="text" id="screenshot-template" name="screenshot_template"
                               value="{{.Config.ScreenshotTemplate}}"
                               placeholder="mpv-shot%n"
                               class="w-full bg-gray-600 text-white rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
                        <details class="mt-2">
                            <summary class="text-xs text-purple-400 cursor-pointer hover:text-purple-300">
                                <i class="bx bx-help-circle mr-1"></i>Template options
                            </summary>
                            <div class="mt-2 text-xs text-gray-400 bg-gray-800 rounded p-3 space-y-1">
                                <p><code class="bg-gray-700 px-1 rounded">%f</code> - filename (no ext)</p>
                                <p><code class="bg-gray-700 px-1 rounded">%F</code> - full filepath</p>
                                <p><code class="bg-gray-700 px-1 rounded">%n</code> - sequential number</p>
                                <p><code class="bg-gray-700 px-1 rounded">%t</code> - timestamp (UTC)</p>
                                <p><code class="bg-gray-700 px-1 rounded">%T</code> - timestamp (local)</p>
                                <p><code class="bg-gray-700 px-1 rounded">%wH</code> - hour (2 digits)</p>
                                <p><code class="bg-gray-700 px-1 rounded">%wM</code> - minute (2 digits)</p>
                                <p><code class="bg-gray-700 px-1 rounded">%wS</code> - second (2 digits)</p>
                                <p><code class="bg-gray-700 px-1 rounded">%wT</code> - milliseconds (3 digits)</p>
                                <p class="mt-2 text-gray-500">Default: <code class="bg-gray-700 px-1 rounded">mpv-shot%n</code></p>
                            </div>
                        </details>
                    </div>
                </div>
            </div>

            <!-- General Options Group -->
            <div class="bg-gray-700 rounded-lg p-4">
                <h4 class="text-md font-semibold text-white mb-3">General Options</h4>
                <div class="grid grid-cols-2 gap-4">
                    <!-- Screenshot Tag Colorspace -->
                    <div>
                        <label class="block text-sm font-medium text-gray-300 mb-2">Tag Colorspace in Filename</label>
                        <select id="screenshot-tag-colorspace" name="screenshot_tag_colorspace"
                                class="w-full bg-gray-600 text-white rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
                            <option value="yes" {{if eq .Config.ScreenshotTagColorspace "yes"}}selected{{end}}>Yes (Default)</option>
                            <option value="no" {{if eq .Config.ScreenshotTagColorspace "no"}}selected{{end}}>No</option>
                        </select>
                        <p class="text-xs text-gray-400 mt-1">Include colorspace info (e.g., bt.709, bt.2020).</p>
                    </div>

                    <!-- Screenshot High Bit Depth -->
                    <div>
                        <label class="block text-sm font-medium text-gray-300 mb-2">High Bit Depth</label>
                        <select id="screenshot-high-bit-depth" name="screenshot_high_bit_depth"
                                class="w-full bg-gray-600 text-white rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
                            <option value="yes" {{if eq .Config.ScreenshotHighBitDepth "yes"}}selected{{end}}>Yes (Default)</option>
                            <option value="no" {{if eq .Config.ScreenshotHighBitDepth "no"}}selected{{end}}>No</option>
                        </select>
                        <p class="text-xs text-gray-400 mt-1">Use 10-bit+ for HDR content.</p>
                    </div>
                </div>
            </div>

            <!-- PNG Codec Group -->
            <div class="grid md:grid-cols-2 gap-4">
                <div class="bg-gray-700 rounded-lg p-4">
                    <h4 class="text-md font-semibold text-white mb-3">PNG Codec Settings</h4>
                    <div>
                        <!-- Screenshot PNG Compression -->
                        <div>
                            <label class="block text-sm font-medium text-gray-300 mb-2">PNG Compression Level</label>
                            <input type="number" id="screenshot-png-compression" name="screenshot_png_compression"
                                   value="{{.Config.ScreenshotPngCompression}}"
                                   min="0" max="9"
                                   placeholder="7"
                                   class="w-full bg-gray-600 text-white rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
                            <p class="text-xs text-gray-400 mt-1">PNG compression (0-9). Higher = smaller file, slower. Default: 7</p>
                        </div>
                    </div>
                </div>

                <!-- JPEG Codec Group -->
                <div class="bg-gray-700 rounded-lg p-4">
                    <h4 class="text-md font-semibold text-white mb-3">JPEG Codec Settings</h4>
                    <div>
                        <!-- Screenshot JPEG Quality -->
                        <div>
                            <label class="block text-sm font-medium text-gray-300 mb-2">JPEG Quality</label>
                            <input type="number" id="screenshot-jpeg-quality" name="screenshot_jpeg_quality"
                                   value="{{.Config.ScreenshotJpegQuality}}"
                                   min="0" max="100"
                                   placeholder="90"
                                   class="w-full bg-gray-600 text-white rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
                            <p class="text-xs text-gray-400 mt-1">Quality for JPEG/JPG (0-100). Higher = better quality, larger file. Default: 90</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- WebP Codec Group -->
            <div class="grid md:grid-cols-2 gap-4">
                <div class="bg-gray-700 rounded-lg p-4">
                    <h4 class="text-md font-semibold text-white mb-3">WebP Codec Settings</h4>
                    <div class="space-y-4">
                        <!-- Screenshot WebP Lossless -->
                        <div>
                            <label class="block text-sm font-medium text-gray-300 mb-2">Lossless</label>
                            <select id="screenshot-webp-lossless" name="screenshot_webp_lossless"
                                    class="w-full bg-gray-600 text-white rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
                                <option value="no" {{if eq .Config.ScreenshotWebpLossless "no"}}selected{{end}}>No (Default)</option>
                                <option value="yes" {{if eq .Config.ScreenshotWebpLossless "yes"}}selected{{end}}>Yes (Recommended)</option>
                            </select>
                            <p class="text-xs text-gray-400 mt-1">Yes = no quality loss, larger files.</p>
                        </div>

                        <!-- Screenshot WebP Quality -->
                        <div>
                            <label class="block text-sm font-medium text-gray-300 mb-2">Quality</label>
                            <input type="number" id="screenshot-webp-quality" name="screenshot_webp_quality"
                                   value="{{.Config.ScreenshotWebpQuality}}"
                                   min="0" max="100"
                                   placeholder="75"
                                   class="w-full bg-gray-600 text-white rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
                            <p class="text-xs text-gray-400 mt-1">Quality for lossy WebP (0-100). Default: 75</p>
                        </div>
                    </div>
                </div>

                <!-- JPEG XL Codec Group -->
                <div class="bg-gray-700 rounded-lg p-4">
                    <h4 class="text-md font-semibold text-white mb-3">JPEG XL Codec Settings</h4>
                    <div>
                        <!-- Screenshot JXL Distance -->
                        <div>
                            <label class="block text-sm font-medium text-gray-300 mb-2">Distance</label>
                            <input type="number" id="screenshot-jxl-distance" name="screenshot_jxl_distance"
                                   value="{{.Config.ScreenshotJxlDistance}}"
                                   min="0" max="15" step="0.1"
                                   placeholder="1.0"
                                   class="w-full bg-gray-600 text-white rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
                            <p class="text-xs text-gray-400 mt-1">Distance (0.0-15.0). Lower = better quality. <strong>0.0 = lossless</strong>. Default: 1.0</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- AVIF Codec Group -->
            <div class="bg-gray-700 rounded-lg p-4">
                <h4 class="text-md font-semibold text-white mb-3">AVIF Codec Settings</h4>
                <div class="space-y-4">
                    <div class="grid grid-cols-2 gap-4">
                        <!-- Screenshot AVIF Encoder -->
                        <div>
                            <label class="block text-sm font-medium text-gray-300 mb-2">Encoder</label>
                            <input type="text" id="screenshot-avif-encoder" name="screenshot_avif_encoder"
                                   value="{{.Config.ScreenshotAvifEncoder}}"
                                   placeholder="libaom-av1"
                                   class="w-full bg-gray-600 text-white rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
                            <p class="text-xs text-gray-400 mt-1">Encoder name (e.g., libaom-av1, rav1e). Default: libaom-av1</p>
                        </div>

                        <!-- Screenshot AVIF Pixel Format -->
                        <div>
                            <label class="block text-sm font-medium text-gray-300 mb-2">Pixel Format</label>
                            <input type="text" id="screenshot-avif-pixfmt" name="screenshot_avif_pixfmt"
                                   value="{{.Config.ScreenshotAvifPixfmt}}"
                                   placeholder="yuv420p"
                                   class="w-full bg-gray-600 text-white rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
                            <p class="text-xs text-gray-400 mt-1">Pixel format (e.g., yuv420p, yuv444p). Leave empty for auto.</p>
                        </div>
                    </div>

                    <!-- Screenshot AVIF Options (Full Width) -->
                    <div>
                        <label class="block text-sm font-medium text-gray-300 mb-2">Encoder Options</label>
                        <input type="text" id="screenshot-avif-opts" name="screenshot_avif_opts"
                               value="{{.Config.ScreenshotAvifOpts}}"
                               placeholder="usage=allintra,crf=0,cpu-used=8"
                               class="w-full bg-gray-600 text-white rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
                        <p class="text-xs text-gray-400 mt-1">Options as key=value list. Default: usage=allintra,crf=0,cpu-used=8</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="border-t border-gray-700 my-6"></div>

    <div class="grid grid-cols-2 gap-4">
	    <div class="bg-gray-800 rounded-lg p-6 mb-6">
	        <h3 class="text-xl font-semibold text-purple-400 mb-4">Reset MPV Config</h3>

	        <p class="text-gray-400 mb-4">
	            Reset your MPV configuration to recommended settings. A backup will be created automatically.
	        </p>

	        <button class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded transition flex items-center gap-2"
	                data-modal="reset-config">
	            <i class="bx bx-refresh"></i>
	            Reset Config
	        </button>
	    </div>

	    <div class="bg-gray-800 rounded-lg p-6 mb-6">
	        <h3 class="text-xl font-semibold text-purple-400 mb-4">Config File Location</h3>

	        <div class="space-y-2">
				<div class="grid grid-cols-2 gap-4">
		            <div class="bg-gray-700 rounded-lg p-4">
		                <p class="text-sm text-gray-400">Active Config</p>
		                <p class="font-mono text-sm text-white">~/.config/mpv/mpv.conf</p>
		            </div>
		            <div class="bg-gray-700 rounded-lg p-4">
		                <p class="text-sm text-gray-400">Backup Directory</p>
		                <p class="font-mono text-sm text-white">~/.config/mpv/conf_backups/</p>
		            </div>
				</div>
	        </div>
	    </div>
    </div>

    <div class="bg-gray-800 rounded-lg p-6 mb-6">
        <h3 class="text-xl font-semibold text-purple-400 mb-4">Restore Config Backup</h3>

        <p class="text-gray-400 mb-4">
            Restore MPV configuration from a previous backup:
        </p>

        <div id="backup-list-container">
            {{if .ConfigBackups}}
            <div class="space-y-3">
                {{range .ConfigBackups}}
                <div class="bg-gray-700 rounded-lg p-4 flex items-center justify-between">
                    <div>
                        <h4 class="font-semibold text-white">{{.Filename}}</h4>
                        <p class="text-gray-500 text-xs mt-1">Created: {{.CreatedDate}}</p>
                        <p class="text-gray-400 text-sm mt-1">Path: {{.FilePath}}</p>
                    </div>
                    <div class="flex gap-2">
                        <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded transition flex items-center gap-2"
                                data-modal="restore-config"
                                data-modal-params='backup_path={{.FilePath}}'>
                            <i class="bx bx-history"></i>
                            Restore
                        </button>
                        <button class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded transition flex items-center gap-2"
                                data-modal="delete-backup"
                                data-modal-params='backup_path={{.FilePath}}'>
                            <i class="bx bx-trash"></i>
                            Delete
                        </button>
                    </div>
                </div>
                {{end}}
            </div>
            {{else}}
            <div id="no-backups" class="text-center py-8">
                <p class="text-gray-400">No configuration backups found</p>
                <p class="text-gray-500 text-sm mt-2">Backups are created automatically when you reset config</p>
            </div>
            {{end}}
        </div>
    </div>
</div>
{{end}}
