<?php

declare(strict_types=1);

?>

<div class="designer-topbar">

    <div class="row align-items-center">

        <div class="col-lg-8">

            <div class="d-flex align-items-center gap-3">

                <a
                    href="/public/dynamic-forms"
                    class="btn btn-light">

                    <i class="bi bi-arrow-left"></i>

                </a>

                <div>

                    <div
                        class="d-flex
                               align-items-center
                               gap-2
                               mb-2">

                        <span class="designer-code">

                            <?= htmlspecialchars(
                                (string) (
                                    $form['form_code']
                                    ?? ''
                                ),
                                ENT_QUOTES,
                                'UTF-8'
                            ) ?>

                        </span>

                        <span
                            class="designer-status
                                   designer-status-<?= htmlspecialchars(
                                        $formStatus,
                                        ENT_QUOTES,
                                        'UTF-8'
                                   ) ?>">

                            <?= htmlspecialchars(
                                ucfirst($formStatus),
                                ENT_QUOTES,
                                'UTF-8'
                            ) ?>

                        </span>

                    </div>

                    <h3 class="designer-title">

                        <?= htmlspecialchars(
                            (string) (
                                $form['form_name']
                                ?? 'Untitled Form'
                            ),
                            ENT_QUOTES,
                            'UTF-8'
                        ) ?>

                    </h3>

                    <div class="designer-subtitle">

                        Enterprise Dynamic Form Builder

                    </div>

                </div>

            </div>

        </div>

        <div class="col-lg-4">

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

                <a
                    href="/public/dynamic-forms/preview?id=<?= $formId ?>"
                    class="btn btn-outline-primary"
                    target="_blank">

                    <i class="bi bi-eye"></i>

                    Preview

                </a>

                <button
                    type="button"
                    class="btn btn-success"
                    id="btnSaveDesigner">

                    <i class="bi bi-floppy"></i>

                    Save

                </button>

                <button
                    type="button"
                    class="btn btn-primary"
                    data-bs-toggle="modal"
                    data-bs-target="#addSectionModal">

                    <i class="bi bi-plus-lg"></i>

                    Section

                </button>

            </div>

        </div>

    </div>

</div>