<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>

<button class="btn btn-outline">Outline</button>
<button class="btn btn-ghost">Ghost</button>

<button class="btn btn-soft-primary">Soft Primary</button>
<button class="btn btn-soft-success">Soft Success</button>
<button class="btn btn-soft-danger">Soft Danger</button>

<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary">Default</button>
<button class="btn btn-primary btn-lg">Large</button>

<button class="btn btn-primary">
    <i class="bi bi-plus-lg"></i> Adaugă
</button>

<div class="actions-cell">
    <button class="action-btn"><i class="bi bi-eye"></i></button>
    <button class="action-btn edit"><i class="bi bi-pencil"></i></button>
    <button class="action-btn delete"><i class="bi bi-trash"></i></button>
</div>

<div class="form-group">
    <label class="form-label">Nume <span class="required">*</span></label>
    <input type="text" class="form-control" placeholder="Introdu numele...">
</div>

<div class="form-group">
    <label class="form-label">Status</label>
    <select class="form-control">
        <option value="">Selectează...</option>
        <option value="active">Activ</option>
    </select>
</div>

<div class="form-group">
    <label class="form-label">Descriere</label>
    <textarea class="form-control" rows="3"></textarea>
</div>

<!-- Checkbox -->
<div class="form-check">
    <input type="checkbox" class="form-check-input" id="check1">
    <label class="form-check-label" for="check1">Checkbox</label>
</div>

<!-- Switch -->
<div class="form-check form-switch">
    <input type="checkbox" class="form-check-input" id="switch1">
    <label class="form-check-label" for="switch1">Switch</label>
</div>

<div class="form-row">
    <div class="form-group">
        <label class="form-label">Prenume</label>
        <input type="text" class="form-control">
    </div>
    <div class="form-group">
        <label class="form-label">Nume</label>
        <input type="text" class="form-control">
    </div>
</div>

<span class="status-badge success">Activ</span>
<span class="status-badge warning">În așteptare</span>
<span class="status-badge danger">Inactiv</span>
<span class="status-badge primary">În lucru</span>
<span class="status-badge gray">Finalizat</span>

<span class="role-badge admin">Administrator</span>
<span class="role-badge manager">Manager</span>
<span class="role-badge user">Utilizator</span>

<div class="card">
    <div class="card-header">
        <h3 class="card-title">Titlu Card</h3>
    </div>
    <div class="card-body">
        <p>Conținutul cardului aici...</p>
    </div>
</div>

<div class="info-row">
    <div class="info-label">Nume</div>
    <div class="info-value">Ion Popescu</div>
</div>

<?php include 'blocks/stat-card.php'; ?>

<?php
echo renderStatCard(
    'bi-people',     // icon
    'primary',       // color: primary|success|warning|danger
    '248',           // value
    'Total clienți'  // label
);
?>

<table class="data-table table-responsive-load">
    <thead>
        <tr>
            <th>Nume</th>
            <th>Status</th>
            <th>Acțiuni</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>...</td>
        </tr>
    </tbody>
</table>

<div class="cell-main">
    <div class="cell-avatar primary">IP</div>
    <div class="cell-info">
        <h4><a href="#">Ion Popescu</a></h4>
        <p>Manager vânzări</p>
    </div>
</div>

<!-- Variante avatar: primary, success, warning, danger -->

/* CSS Variables */
:root {
    --primary: #3b82f6;
    --primary-light: #60a5fa;
    --primary-dark: #2563eb;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
}

<!-- Prefix: bi bi-{nume} -->
<i class="bi bi-house-door"></i>
<i class="bi bi-people"></i>
<i class="bi bi-folder"></i>

<?php
$filters = [
    'search' => [
        'placeholder' => 'Caută...',
        'name' => 'q'
    ],
    'selects' => [
        [
            'name' => 'status',
            'placeholder' => 'Status',
            'options' => [
                ['value' => 'active', 'label' => 'Activ']
            ]
        ]
    ]
];
include 'blocks/filters.php';
?>

<?php
$pagination = [
    'current' => 3,        // Pagina curentă
    'total' => 10,         // Total pagini
    'perPage' => 10,       // Itemi per pagină
    'totalItems' => 98     // Total itemi
];
include 'blocks/pagination.php';
?>

<?php
$pageHeader = [
    'title' => 'Titlu Pagină',
    'subtitle' => 'Descriere scurtă',
    'actions' => [
        [
            'label' => 'Export',
            'icon' => 'bi-download',
            'class' => 'btn-outline'
        ],
        [
            'label' => 'Adaugă',
            'icon' => 'bi-plus-lg',
            'class' => 'btn-primary',
            'modal' => 'client'
        ]
    ]
];
include 'blocks/page-header.php';
?>

// Funcția globală fn_show_notification(message, type)
// type: 'success' | 'error' | 'warning' | 'info'

// Success notification
fn_show_notification('Salvat cu succes!', 'success');

// Error notification
fn_show_notification('A apărut o eroare!', 'error');

// Warning notification
fn_show_notification('Verifică datele!', 'warning');

// Info notification
fn_show_notification('Informație utilă.', 'info');

// Deschide modal cu conținut static
fn_open_modal({
    title: 'Titlu Modal',
    content: '<div>Conținut HTML</div>'
});

// Deschide modal cu conținut încărcat via AJAX
fn_open_modal({
    title: 'Editează Client',
    url: 'ajax/modal-client.php',
    submit_text: 'Salvează',
    on_submit: function(modal, body) {
        // Logică la submit
    }
});

// Închide modal-ul programatic
fn_close_modal();

// Sau folosește atribute data-* pe butoane
<button data-modal-open="client" data-modal-title="Client nou">
    Adaugă Client
</button>

// fn_open_notes_panel(object_type, object_id, object_name)
// object_type: 'client' | 'lead' | 'project' | 'task' | 'contract'

// Deschide notițe pentru un client
fn_open_notes_panel('client', 1, 'TechCorp SRL');

// Deschide notițe pentru un proiect
fn_open_notes_panel('project', 5, 'Redesign Website');

// Exemplu pe un buton în tabel
<button class="action-btn"
        onclick="fn_open_notes_panel('client', 1, 'TechCorp')">
    <i class="bi bi-sticky"></i>
</button>

// Formatare numere cu separator de mii
fn_format_number(1234567);  // "1.234.567"

// Formatare valută
fn_format_currency(1250.50);  // "1.250,50 RON"
fn_format_currency(1250.50, 'EUR');  // "1.250,50 EUR"

// Formatare dată
fn_format_date('2024-03-15');  // "15.03.2024"
fn_format_date('2024-03-15', 'long');  // "15 martie 2024"

// Debounce pentru optimizare
var handle_search = fn_debounce(function() {
    // Logică de căutare
}, 300);

<!-- Select simplu cu căutare -->
<select class="form-control" data-searchable>
    <option value="">Selectează...</option>
    <option value="1">Opțiunea 1</option>
    <option value="2">Opțiunea 2</option>
</select>

<!-- Cu sublabel și icon -->
<option value="1"
        data-sublabel="RO12345678"
        data-icon="TC"
        data-color="#3b82f6">
    TechCorp SRL
</option>

// Refresh programatic
fn_refresh_searchable_select('client_id');

<!-- Datepicker simplu -->
<input type="date" class="form-control" name="start_date">

<!-- Cu limite min/max -->
<input type="date" class="form-control"
       name="deadline"
       min="2024-01-01"
       max="2024-12-31">

<!-- Cu valoare predefinită -->
<input type="date" class="form-control"
       name="event_date"
       value="2024-03-15">

// Refresh programatic
fn_refresh_datepicker('deadline');

// Confirmare simplă cu confirm() nativ
if (confirm('Sigur vrei să ștergi?')) {
    // Acțiune de ștergere
    fn_show_notification('Element șters!', 'success');
}

// Pe un buton de ștergere
<button class="action-btn delete"
        onclick="if(confirm('Ștergi?')) fn_delete_item(1)">
    <i class="bi bi-trash"></i>
</button>

<?php
$pageTitle = 'Titlu Pagină';
$pageDescription = 'Descriere';
$activePage = 'page-id';
?>
<!DOCTYPE html>
<html lang="ro">
<head>
    <?php include 'components/head.php'; ?>
</head>
<body>
    <div class="app-wrapper">
        <?php include 'components/menu.php'; ?>
        <main class="app-main">
            <?php include 'components/header.php'; ?>
            <div class="app-content">
                <!-- Conținut -->
            </div>
        </main>
        <?php include 'components/right-sidebar.php'; ?>
    </div>
    <?php include 'components/footer.php'; ?>
</body>
</html>