<!-- layout -->
{{ @extends("__app.crm.layout__") }}
<!-- /layout -->

<!-- Main Content -->
<main class="main-content" id="mainContent">
    <!-- navbar -->
    {{ @extends("__app.crm.navbar__") }}
    <!-- /navbar -->

    <div class="d-flex gap-0 content-section">
        <div class="col-2">
            <!-- sidebar -->
            {{ @extends("__app.crm.sidebar__") }}
            <!-- /sidebar -->
        </div>

        <!-- Dashboard Content -->
        <div class="col-10 p-2">
            <div class="card border-0 rounded-0 shadow-sm mb-3 p-2">
                <div class="text-dark d-flex justify-content-between align-items-center">
                    <h2 class="mb-0">
                        <i class="bi bi-book me-2"></i>Dictionary Words
                    </h2>
                    <div class="d-flex gap-2"> 
                        <button id="add-word-btn-modal-opener"
                            class="btn btn-sm btn-primary add-word-btn-modal-opener"
                            target-modal="#addWordModal">
                            <i class="bi bi-plus me-2"></i>Add Word
                        </button>
                    </div>
                </div>
            </div>

            <!-- Quick Stats -->
            <div class="row mb-3 p-1">
                <div class="col-md-3">
                    <div class="card bg-primary text-white">
                        <div class="card-body py-2">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="mb-0">Total Words</h6>
                                    <h3 class="mb-0">1,245</h3>
                                </div>
                                <i class="bi bi-book fs-4"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-success text-white">
                        <div class="card-body py-2">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="mb-0">Published</h6>
                                    <h3 class="mb-0">1,120</h3>
                                </div>
                                <i class="bi bi-check-circle fs-4"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-warning text-white">
                        <div class="card-body py-2">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="mb-0">Pending</h6>
                                    <h3 class="mb-0">85</h3>
                                </div>
                                <i class="bi bi-clock fs-4"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-info text-white">
                        <div class="card-body py-2">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="mb-0">Categories</h6>
                                    <h3 class="mb-0">24</h3>
                                </div>
                                <i class="bi bi-tags fs-4"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="card border-0 rounded-0">
                <div class="card-body p-1 my-3">

                    <!-- scopes -->
                    <div class="text-dark rounded-0 mb-2 border-0">
                        {{ @extends("__partials.dictionary-scopes__") }}
                    </div>

                    <div class="table-responsive">
                        <table class="table table-striped table-hover mb-0 words-table">
                            <thead class="table-dark">
                                <tr>
                                    <th width="15%">Word</th>
                                    <th width="20%">Definition</th>
                                    <th width="10%">Pronunciation</th>
                                    <th width="15%">Category</th>
                                    <th width="10%">Type</th>
                                    <th width="10%">Status</th>
                                    <th width="10%">Created</th>
                                    <th width="10%" class="text-end">Actions</th>
                                </tr>
                            </thead>
                            <tbody> 
                                <!-- Data sits in here... --> 
                            </tbody>
                        </table>
                    </div> 
                </div>
            </div>
        </div>
    </div>
</main>

<!-- modals -->
<div class="modal fade" id="addWordModal" tabindex="-1" 
    aria-labelledby="addWordModalLabel" aria-hidden="true">
    <!-- Add Word Modal Content -->
</div>

<div class="modal fade" id="updateWordModal" tabindex="-1" 
    aria-labelledby="updateWordModalLabel" aria-hidden="true">
    <!-- Add Word Modal Content -->
</div>

<div class="modal fade" id="viewWordModal" tabindex="-1" 
    aria-labelledby="viewWordModalLabel" aria-hidden="true">
    <!-- View Word Modal Content -->
</div>
<!-- /modals -->

<!-- footer -->
{{ @extends("__app.crm.footer__") }}
<!-- /footer -->

<!-- dictionary js -->
<script type="text/javascript" src="<?= asset_path('js/modules/dictionary.js') ?>"></script>

<!-- closure -->
{{ @extends("__app.crm.closure__") }}
<!-- /closure -->