<?= $this->extend('Mobile/Layouts/App') ?>
<?= $this->section('css') ?>
<style>
    .tox-statusbar {
        display: none;
    }

    .chat-footer {
        height: 80px !important;
        z-index: 1;
    }

    .chat-footer .form-control {
        overflow: auto;
        max-height: 65px;
        background-color: #f1f2fb;
        border-color: #f1f2fb;
        color: #073984;
        border-radius: 50px;
    }

    .tox.tox-tinymce {
        width: 100%;
    }

    .single-chat-item .user-message .single-message.is-teacher p {
        background-color: unset;
    }

    .single-chat-item .user-message .single-message.is-teacher>* {
        background-color: #dcf8c6 !important;
    }
</style>
<?= $this->endSection() ?>

<?= $this->section('header') ?>
<div class="header-area" id="headerArea">
    <div class="container">
        <!-- Header Content -->
        <div class="header-content position-relative d-flex align-items-center justify-content-between">
            <!-- Chat User Info -->
            <div class="chat-user--info d-flex align-items-center">
                <!-- Back Button -->
                <div class="back-button"><a :href="$store.state.config.base_url+'/kelas/jadwal'">
                        <svg class="bi bi-arrow-left-short" width="32" height="32" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" d="M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5z"></path>
                        </svg></a></div>
                <!-- User Thumbnail & Name -->
                <div class="user-thumbnail-name">
                    <div class="info ms-1">
                        <p id="mapel_name"></p><span id="active-status" class="active-status"></span>
                        <!-- span.offline-status.text-muted Last actived 27m ago-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<?= $this->endSection() ?>
<?= $this->section('content') ?>
<div class="page-content-wrapper pt-3 pb-5 mb-5">
    <diskusi></diskusi>
</div>
<?= $this->endSection() ?>
<?= $this->section('js') ?>
<script src="<?= base_url() ?>/vendors/@tinymce/tinymce-vue/lib/browser/tinymce-vue.min.js?v=<?= versioningjs() ?>"></script>
<script src="<?= base_url() ?>/mobile/js/pages/kelas/diskusi.js?v=<?= versioningjs() ?>"></script>
<script>
    VAPP.component('editor', Editor)
    VAPP.component(VPDiskusi.name, VPDiskusi)
</script>
<?= $this->endSection() ?>