


<div style="width: 100%; height: 100%; display: flex; flex-direction: column;">

    <!-- Judul card -->
    <div style="font-weight: 600; text-align: center; margin-bottom: 16px;">
        Edit Overlay
    </div>

    <!-- Isi form -->
    <div style="flex: 1 1 auto;">

        <!-- Overlay Color -->
        <div style="margin-bottom: 16px;">
            <label class="form-label" style="font-size: 14px; margin-bottom: 6px;">
                Overlay Color
            </label>

            <div class="d-flex flex-wrap gap-2 justify-content-center">

                <button class="color-circle-lg"
                        data-color="none"
                        style="background: transparent; border: 1px solid #ccc;"></button>

                <button class="color-circle-lg"
                        data-color="#ff69b4"
                        style="background: #ff69b4;"></button>

                <button class="color-circle-lg"
                        data-color="#00ff66"
                        style="background: #00ff66;"></button>

                <button class="color-circle-lg"
                        data-color="#66ccff"
                        style="background: #66ccff;"></button>

                <!-- Custom Color Button -->
                <button id="openColorPicker"
                        class="color-circle-lg d-flex align-items-center justify-content-center"
                        style="background: #fff; border: 1px solid #ccc;">
                    🎨
                </button>
            </div>

            <!-- Hidden color input -->
            <input type="color"
                   id="customOverlayColor"
                   class="form-control form-control-color mt-2"
                   value="#000000"
                   title="Choose color"
                   style="display: none;">
        </div>

        <!-- Opacity slider -->
        <div style="margin-bottom: 8px;">
            <label for="floatingOverlayOpacity"
                   class="form-label"
                   style="font-size: 14px; margin-bottom: 6px;">
                Opacity
            </label>
            <input type="range"
                   id="floatingOverlayOpacity"
                   class="form-range"
                   min="0"
                   max="1"
                   step="0.01"
                   value="0.3">
        </div>

    </div>
</div>
<?php /**PATH /home/plossayokesen/public_html/resources/views/partials/editor-tab-overlay.blade.php ENDPATH**/ ?>