{% extends "base.html" %}

{% block title %}Create Template{% endblock %}

{% block content %}
<div class="card-container" style="display: flex; gap: 20px;">
    <!-- Left Column -->
    <div class="left-column" style="flex: 1; max-width: 33%;">
        <div class="dashboard-card">
            <h3>Template Settings</h3>
            <p>Set the dimensions and retrieve database headers for the label template:</p>
            
            <!-- Dimensions Section -->
            <div>
                <h4>Dimensions</h4>
                <form id="dimensions-form">
                    <div style="margin-bottom: 10px;">
                        <label for="label-width">Width (mm):</label>
                        <input type="number" id="label-width" name="label_width" required>
                    </div>
                    <div style="margin-bottom: 10px;">
                        <label for="label-height">Height (mm):</label>
                        <input type="number" id="label-height" name="label_height" required>
                    </div>
                    <button type="button" id="set-dimensions-btn" class="btn">Set Label Dimensions</button>
                </form>
            </div>

            <hr style="margin: 20px 0;">

            <!-- Add Fields Section -->
            <div>
                <h4>Add Fields</h4>
                <button type="button" class="btn add-field-btn" data-type="text-label">Add Text Label</button>
                <button type="button" class="btn add-field-btn" data-type="text-input">Add Text Input</button>
                <button type="button" class="btn add-field-btn" data-type="barcode">Add Barcode</button>
                <button type="button" class="btn add-field-btn" data-type="qrcode">Add QR Code</button>
            </div>
            <!-- Get Database Headers Section -->
            <div>
                <h4>Get Database Headers</h4>
                <p>Retrieve column names from a selected database table:</p>
                <button type="button" id="get-tables-btn" class="btn">Get Database Tables</button>
                <div id="tables-container" style="margin-top: 10px;">
                    <!-- Tables will be dynamically populated here -->
                </div>
                <div id="columns-container" style="margin-top: 10px;">
                    <!-- Columns will be dynamically populated here -->
                </div>
            </div>

            <hr style="margin: 20px 0;">

            
        </div>
    </div>

    <!-- Right Column -->
    <div class="right-column" style="flex: 2;">
        <div class="dashboard-card">
            <h3>Interactive Label Preview</h3>
            <p>Drag and drop fields to design your label:</p>
            <div class="label-preview-container" style="display: flex; justify-content: center; align-items: center; height: 100%; position: relative;">
                <div id="label-preview" style="border: 1px solid #ddd; padding: 10px; min-height: 400px; position: relative;">
                    <!-- Fields will be dynamically added here -->
                </div>
            </div>
            <button type="button" id="preview-btn" class="btn" style="margin-top: 10px;">Preview</button>
        </div>
    </div>
</div>

<script src="{{ url_for('static', filename='pdfjs/pdf.worker.js') }}"></script>
<script>
    // Set the worker source for PDF.js
    pdfjsLib.GlobalWorkerOptions.workerSrc = "{{ url_for('static', filename='pdfjs/pdf.worker.min.js') }}";
</script>
{% endblock %}