<?= $this->extend('Panel/Layouts/App') ?>
<?= $this->section('css') ?>
<link rel="stylesheet" href="<?= base_url() ?>/vendors/tom-select@2.0.0-rc.4/dist/css/tom-select.bootstrap5.min.css">
<style>
  /* Chrome, Safari, Edge, Opera */
  .remove-arrow-num::-webkit-outer-spin-button,
  .remove-arrow-num::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* Firefox */
  .remove-arrow-num {
    -moz-appearance: textfield;
  }

  .sort-handle {
    cursor: move;
  }

  #soal-wrap {
    height: 550px;
  }
</style>
<?= $this->endSection() ?>
<?= $this->section('content') ?>
<div class="m-2">
  <div class="col-md-12">
    <div class="title mb-20">
      <h2><i class="lni lni-ruler-pencil"></i> <?= $page_title ?></h2>
    </div>
  </div>
  <ujiandraft></ujiandraft>
</div>
<?= $this->endSection() ?>
<?= $this->section('js') ?>
<script src="<?= base_url() ?>/vendors/sortablejs/Sortable.min.js?v=<?= versioningjs() ?>"></script>
<script src="<?= base_url() ?>/vendors/sortablejs/vue3-sortablejs.global.js?v=<?= versioningjs() ?>"></script>
<script src="<?= base_url() ?>/vendors/tom-select@2.0.0-rc.4/dist/js/tom-select.complete.js?v=<?= versioningjs() ?>"></script>
<script src="<?= base_url() ?>/vendors/gridjs/gridjs.production.min.js?v=<?= versioningjs() ?>"></script>
<script src="<?= base_url() ?>/panel/assets/js/components/VueGrid/VueGrid.js?v=<?= versioningjs() ?>"></script>
<script src="<?= base_url() ?>/panel/assets/js/components/VueTomSelect/VueTomSelect.js?v=<?= versioningjs() ?>"></script>
<script src="<?= base_url() ?>/panel/assets/js/pages/ujian/draft/index.js?v=<?= versioningjs() ?>"></script>
<script>
  VAPP.use(sortablejs);
  VAPP.component(VueTomSelect.name, VueTomSelect);
  VAPP.component(VueGrid.name, VueGrid);
  VAPP.component(VPUjianDraft.name, VPUjianDraft);
</script>
<?= $this->endSection() ?>