<div class="page-title d-flex align-items-center mb-3">

    <!-- Mobile Menu Button -->
    <button
        class="cm-btns orange me-3 d-lg-none"
        type="button"
        data-bs-toggle="offcanvas"
        data-bs-target="#mobileSidebar"
        aria-controls="mobileSidebar"
    >
        ☰
    </button>

    <div>
        <h1 class="mb-1">
            <?php echo $this->activePluginName; ?>
            <?php echo $this->importerOrExporter; ?>
        </h1>
        <p class="alert-content mb-0">
            <?php echo $this->activePluginDescription; ?>
        </p>
    </div>

</div>


<!-- MOBILE OFFCANVAS SIDEBAR -->
<div class="offcanvas offcanvas-start d-lg-none"
     tabindex="-1"
     id="mobileSidebar">

    <div class="offcanvas-header">
        <h5 class="offcanvas-title">

        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>

    <div class="offcanvas-body p-0">
        <ul class="nav flex-column p-3">
            <?php foreach ($this->tabs as $tab) { ?>
                <li class="nav-item">
                    <a
                        class="nav-link <?php echo $tab['active']; ?>"
                        href="index.php?fuse=admin&view=<?php echo $tab['linkView']; ?>&plugin=<?php echo $tab['linkPlugin']; ?>&controller=importexport"
                    >
                        <?php echo $tab['name']; ?>
                    </a>
                </li>
            <?php } ?>
        </ul>
    </div>

</div>


<!-- MAIN LAYOUT -->
<div id="vtabsContainer" class="d-flex">

    <!-- DESKTOP SIDEBAR -->
    <div id="vtabsBarWrapper" class="d-none d-lg-block">
        <ul id="vtabsBar" class="nav flex-column">
            <?php foreach ($this->tabs as $tab) { ?>
                <li class="nav-item">
                    <a
                        class="nav-link <?php echo $tab['active']; ?>"
                        href="index.php?fuse=admin&view=<?php echo $tab['linkView']; ?>&plugin=<?php echo $tab['linkPlugin']; ?>&controller=importexport"
                    >
                        <?php echo $tab['name']; ?>
                    </a>
                </li>
            <?php } ?>
        </ul>
    </div>

    <!-- RIGHT CONTENT PANEL -->
    <div id="vtabContent">

        <form
            name="ImportExportPlugin"
            id="importExportForm"
            method="post"
            action="index.php?fuse=<?php echo $this->formModule; ?>&action=<?php echo $this->formAction; ?>&plugin=<?php echo $this->activePluginKey; ?>&controller=index"
            enctype="multipart/form-data"
        >
            <?php echo $this->unescape($this->activePluginContent); ?>
        </form>

    </div>

</div>


<script data-cfasync="false" type="text/javascript">
    $(document).ready(function() {

        $('#importButton').click(function(e) {
            e.preventDefault();
            $('#importExportForm').submit();
        });

        // Auto-close mobile menu after clicking a link
        $('#mobileSidebar .nav-link').on('click', function () {
            var offcanvasEl = document.getElementById('mobileSidebar');
            var offcanvas = bootstrap.Offcanvas.getInstance(offcanvasEl);
            if (offcanvas) {
                offcanvas.hide();
            }
        });

    });
</script>
