Modal Component

SELECT 'button' AS component;
SELECT 'Open Modal' AS title, 'my-modal' AS modal;

SELECT 'modal' AS component,
       'my-modal' AS id,
       'Modal Title' AS title;
SELECT 'This is the modal content.' AS contents;

SELECT 'button' AS component;
SELECT 'Show Details' AS title,
       'details-modal' AS modal,
       'primary' AS color;

SELECT 'modal' AS component,
       'details-modal' AS id,
       'Additional Information' AS title;

SELECT 'This modal contains additional details about the selected item.' AS contents;

SELECT 'button' AS component;
SELECT 'Read More' AS title, 'info-modal' AS modal;

SELECT 'modal' AS component,
       'info-modal' AS id,
       'About Our Service' AS title,
       'Close' AS close;

SELECT '## Features

- **Fast**: Lightning-quick response times
- **Secure**: Enterprise-grade security
- **Reliable**: 99.9% uptime guarantee

Visit [our website](https://example.com) for more details.' AS contents_md;

SELECT 'button' AS component;
SELECT 'Confirm' AS title,
       'confirm-modal' AS modal,
       'danger' AS color;

SELECT 'modal' AS component,
       'confirm-modal' AS id,
       'Confirm Action' AS title,
       true AS small;

SELECT 'Are you sure you want to proceed?' AS contents;

SELECT 'button' AS component;
SELECT 'View Terms' AS title, 'terms-modal' AS modal;

SELECT 'modal' AS component,
       'terms-modal' AS id,
       'Terms and Conditions' AS title,
       true AS large,
       true AS scrollable;

SELECT '## Terms of Service

**1. Acceptance of Terms**
By accessing and using this service, you accept and agree to be bound by the terms...

**2. Use License**
Permission is granted to temporarily access the materials...

(Additional sections would follow)' AS contents_md;

SELECT 'button' AS component;
SELECT 'View Product' AS title,
       'product-' || product_id AS modal,
       'info' AS color
FROM products
LIMIT 5;

SELECT 'modal' AS component,
       'product-' || product_id AS id,
       product_name AS title
FROM products
LIMIT 5;

SELECT '**Price:** $' || price || '

' || description AS contents_md
FROM products
LIMIT 5;

SELECT 'button' AS component;
SELECT 'Load Content' AS title, 'embed-modal' AS modal;

SELECT 'modal' AS component,
       'embed-modal' AS id,
       'Dynamic Content' AS title,
       'details.sql?_sqlpage_embed' AS embed;

SELECT 'button' AS component;
SELECT 'Watch Video' AS title, 'video-modal' AS modal;

SELECT 'modal' AS component,
       'video-modal' AS id,
       'Tutorial Video' AS title,
       true AS large,
       'https://www.youtube.com/embed/dQw4w9WgXcQ' AS embed,
       'iframe' AS embed_mode,
       '400px' AS height;

SELECT 'button' AS component;
SELECT 'Add Item' AS title,
       'add-modal' AS modal,
       'success' AS color;

SELECT 'modal' AS component,
       'add-modal' AS id,
       'Add New Item' AS title;

SELECT 'form' AS component,
       'create_item.sql' AS action;

SELECT 'name' AS name, 'Item Name' AS label, true AS required;
SELECT 'description' AS name, 'textarea' AS type;
SELECT 'Create' AS validate, 'success' AS validate_color;

SELECT 'button' AS component;
SELECT 'Info' AS title, 'info-modal' AS modal, 'info' AS color;
SELECT 'Warning' AS title, 'warning-modal' AS modal, 'warning' AS color;
SELECT 'Error' AS title, 'error-modal' AS modal, 'danger' AS color;

SELECT 'modal' AS component,
       'info-modal' AS id,
       'Information' AS title;
SELECT 'This is an informational message.' AS contents;

SELECT 'modal' AS component,
       'warning-modal' AS id,
       'Warning' AS title;
SELECT 'Please proceed with caution.' AS contents;

SELECT 'modal' AS component,
       'error-modal' AS id,
       'Error' AS title;
SELECT 'An error has occurred.' AS contents;

SELECT 'button' AS component;
SELECT 'Delete Item' AS title,
       'delete-modal' AS modal,
       'danger' AS color,
       'trash' AS icon;

SELECT 'modal' AS component,
       'delete-modal' AS id,
       'Confirm Deletion' AS title,
       true AS small;

SELECT 'Are you sure you want to delete this item? This action cannot be undone.' AS contents;

SELECT 'button' AS component;
SELECT 'delete.sql?id=' || :id AS link,
       'Delete' AS title,
       'danger' AS color;

SELECT 'button' AS component;
SELECT 'Open' AS title, 'my-modal' AS modal;

SELECT 'text' AS component;
SELECT 'Click [here](#) to learn more.' AS contents_md;
-- Add data-bs-toggle="modal" data-bs-target="#my-modal" to the link in custom HTML

// In a custom JavaScript file
const modal = new bootstrap.Modal(document.getElementById('my-modal'));
modal.show();

SELECT 'modal' AS component,
       'my-modal' AS id,
       'Embedded Page' AS title,
       'other-page.sql?_sqlpage_embed' AS embed;