<?= $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>
  .stady-wrapper,
  .loading-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .stady-wrapper .file-upload,
  .loading-wrapper .file-upload {
    height: 200px;
    width: 200px;
    border-radius: 100px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 4px solid #FFFFFF;
    overflow: hidden;
    background-image: linear-gradient(to bottom, #2590EB 50%, #FFFFFF 50%);
    background-size: 100% 200%;
    transition: all 1s;
    color: #FFFFFF;
    font-size: 100px;
  }

  .stady-wrapper .file-upload input[type=file],
  .loading-wrapper .file-upload input[type=file] {
    height: 200px;
    width: 200px;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
  }

  .stady-wrapper .file-upload:hover {
    background-position: 0 -100%;
    color: #2590EB;
  }

  .blink_me {
    animation: blinker 1s linear infinite;
  }

  @keyframes blinker {
    50% {
      opacity: 0;
      color: #2590EB;
    }
  }

  .loading-wrapper .file-upload:hover {
    color: #2590EB;
  }
</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-users"></i> <?= $page_title ?></h2>
    </div>
  </div>
  <siswa></siswa>
</div>
<?= $this->endSection() ?>
<?= $this->section('js') ?>
<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/masterdata/alumni/index.js?v=<?= versioningjs() ?>"></script>
<script>
  VAPP.component(VueTomSelect.name, VueTomSelect);
  VAPP.component(VueGrid.name, VueGrid);
  VAPP.component(VPAlumni.name, VPAlumni);
</script>
<?= $this->endSection() ?>