Alert Component
   Provide contextual feedback messages with Bootstrap 5.
   
   Parameters:
   - type: string - Alert variant (primary, secondary, success, danger, warning, info, light, dark) (optional)
   - message: string - Main alert content
   - heading: string - Optional alert heading (optional)
   - additional: string - Optional additional content shown below a divider (optional)
   - icon: string - Optional icon HTML content (optional)
   - dismissible: boolean - Whether the alert can be dismissed (optional)
   - id: string - Optional unique identifier for the alert (optional)
   - class: string - Additional CSS classes (optional)

    ThemedComponent::make("feedback/alert")
	->addAttribute('value') //Add an attribute to the element. This is a string like 'data-foo="bar"' or multiple attributes in a single string like 'data-foo="bar" data-bar="baz"' (optional)
	->addCss('value') //string - Add css styles to the element. This should be '<style> custom-class {...} </style>' (optional)
	->addJavaScript('value') //string - Add a script to the element. This is a string like '<script>console.log('Hello World!')</script>' (optional)
	->additional('value') //string - Optional additional content shown below a divider (optional)
	->canSee('value') //bool - Whether the component should be visible or not (optional)
	->class('value') //string - Additional CSS classes (optional)
	->dismissible('value') //boolean - Whether the alert can be dismissed (optional)
	->heading('value') //string - Optional alert heading (optional)
	->icon('value') //string - Optional icon HTML content (optional)
	->id('value') //string - The id of the element. If no id is supplied, a random one will be generated (optional)
	->message('value') //string - Main alert content
	->type('value') //string - Alert variant (primary, secondary, success, danger, warning, info, light, dark) (optional)
	->render();

// Initialize variables
$variants = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'];

// Basic Alerts Section
$basicAlertsContent = function() use ($variants) {
    $alertContent = '';
    foreach ($variants as $x => $variant) {
        $alertContent .= ThemedComponent::make('feedback/alert')
            ->type($variant)
            ->message(ucfirst($variant) . ' alert with an example message.')
            ->class('mb-3')
            ->dismissible($x % 2 == 0)
            ->render();
    }
    return $alertContent;
};

$iconAlerts = [
    ['type' => 'success', 'icon' => 'bi bi-check-circle-fill', 'message' => 'Operation completed successfully!'],
    ['type' => 'danger', 'icon' => 'bi bi-exclamation-triangle-fill', 'message' => 'Error occurred during processing.'],
    ['type' => 'info', 'icon' => 'bi bi-info-circle-fill', 'message' => 'Please review the updated information.']
];

// Alerts with Icons Section
$alertContent = '';
foreach ($iconAlerts as $x => $alert) {
    $alertsWithIconsContent .= ThemedComponent::make('feedback/alert')
        ->type($alert['type'])
        ->icon(
            ThemedComponent::make('icons/icon')
                ->name($alert['icon'])
                ->preset_color($alert['type'])
                ->size("24px")
                ->render()
        )
        ->dismissible($x % 2 == 0)
        ->message($alert['message'])
        ->class('mb-3')
        ->render();
}

// Alert with heading
$richAlertsContent .= ThemedComponent::make('feedback/alert')
    ->type('success')
    
    ->icon(
        ThemedComponent::make('icons/icon')
            ->name('check-circle-fill')
            ->preset_color('success')
            ->size('24px')
            ->render()
    )
    ->heading('Well done!')
    ->dismissible(false)
    ->message('You successfully read this important alert message.')
    ->additional('<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>')
    ->class('mb-3')
    ->render();

// Alert with list
$richAlertsContent .= ThemedComponent::make('feedback/alert')
    ->type('info')
    ->icon(
        ThemedComponent::make('icons/icon')
            ->name('info-circle-fill')
            ->preset_color('info')
            ->size('24px')
            ->render()
    )
    ->heading('Update Available')
    ->message('A new software update is available with the following changes:')
    ->additional('<ul class="mb-0"><li>Enhanced security features</li><li>Performance improvements</li><li>Bug fixes and stability updates</li></ul>')
    ->dismissible(true)
    ->class('mb-3')
    ->render();

.alert {
    position: relative;
}

.alert .btn-close {
    position: absolute;
    right: 1rem;
    top: 1rem;
}
.alert svg {
    width: 24px;
    height: 24px;
}

{# Alert Component
   Provide contextual feedback messages with Bootstrap 5.
   
   Parameters:
   - type: string - Alert variant (primary, secondary, success, danger, warning, info, light, dark) (optional)
   - message: string - Main alert content
   - heading: string - Optional alert heading (optional)
   - additional: string - Optional additional content shown below a divider (optional)
   - icon: string - Optional icon HTML content (optional)
   - dismissible: boolean - Whether the alert can be dismissed (optional)
   - id: string - Optional unique identifier for the alert (optional)
   - class: string - Additional CSS classes (optional)
#}
<div class="alert alert-{{ content.type|default('primary') }}{% if content.class %} {{ content.class }}{% endif %}" 
     role="alert"
     {% if content.id %}id="{{ content.id }}"{% endif %}>
    {% if content.dismissible %}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    {% endif %}

    {% if content.icon %}
        {{ content.icon|raw }}
    {% endif %}

    {% if content.heading %}
    <h4 class="alert-heading">{{ content.heading }}</h4>
    {% endif %}

    {{ content.message|raw }}

    {% if content.additional %}
    <hr>
    <p class="mb-0">{{ content.additional|raw }}</p>
    {% endif %}
</div>

{% if content.dismissible %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    var alert = document.getElementById('{{ content.id }}');
    if (alert) {
        new bootstrap.Alert(alert);
    }
});
</script>
{% endif %}