HTML Template Form1.7.25 Semantic UI theme

Map xCRUD fields to HTML Template
HIDE CODE
<?php
	$xcrud = Xcrud::get_instance();	
	$xcrud->table("orders");

    $html_template = '<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Customer Order Form</title>
    <style>
        /* Add your custom CSS styles here */
        body {
            font-family: Arial, sans-serif;
        }
        .order-form {
            max-width: 600px;
            margin: 0 auto;
            border: 1px solid #ccc;
            padding: 20px;
            border-radius: 8px;
            background-color: #f9f9f9;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-label {
            font-weight: bold;
        }
        .form-control {
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        .form-actions {
            text-align: center;
        }
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            background-color: #007bff;
            color: #fff;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .btn:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="order-form">
        <h2>Customer Order Form</h2>
        <div class="form-group">
            <label class="form-label">Customer Number:</label>
            {customerNumber}
        </div>
        <div class="form-group">
            <label class="form-label">Order Date:</label>
            {orderDate}
        </div>
        <div class="form-group">
            <label class="form-label">Status:</label>
            {status}
        </div>
        <div class="form-group">
            <label class="form-label">Required Date:</label>
            {requiredDate}
        </div>
        <div class="form-group">
            <label class="form-label">Shipped Date:</label>
            {shippedDate}
        </div>
        <div class="form-actions">
            {action}
        </div>

    </div>
</body>
</html>
';

    $xcrud->change_type("status","select","",array("Not Shipped"=>"Not Shipped","Shipped"=>"Shipped","Completed"=>"Completed"));
 
    $xcrud->label("action","");
    $xcrud->change_type("action","button","",array("href"=>"#","after"=>"edit","task"=>"save","icon"=>"fa fa-file","title"=>"Save My Form"));
    $xcrud->set_attr("action",array("class"=>"btn btn-light xcrud-action","data-confirm"=>"Do you wish to save?"));


    $xcrud->hide_button("save_edit");
    $xcrud->hide_button("save_return");
    $xcrud->hide_button("save_new");
    $xcrud->set_template($html_template);
    $xcrud->unset_remove(true,"orderNumber","=",10109);
    echo $xcrud->render("edit",10109);	
?>
Orders - Edit

Return