<!-- Accounts Section -->
<div id="ledger_accountsSection" class="admin-section section mt-1" style="display:none;">

    <!-- Skeleton -->
    <div class="skeleton-wrapper">
        <div class="skeleton-box"></div>
        <div class="skeleton-box"></div>
    </div>

    <div id="ledger_accounts_HeaderSection" class="section-heading">
        <h3 class="link text-dark">Accounts Ledger List</h3>
        <a href="#" data-toggle="modal" 
           data-target="#ledgaccModalBasic" 
           class="link text-danger">
           Create
        </a>
    </div>

    <!-- Real Content -->
    <div class="content-wrapper" style="display:none;">

        <div class="card">
            <div class="table-responsive" id="ledgerScroll" style="max-height:400px; overflow-y:auto;">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Account Name</th>
                            <th>Account Type</th>
                            <th>Category</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody id="accountlist"></tbody>
                </table>
            </div>
        </div>

    </div> <!-- content-wrapper -->
    
        <!-- Real Content -->
    <div class="content-wrapper" style="display:none;">

        <div class="card">
            <div class="table-responsive" id="ledgerScroll1" style="max-height:400px; overflow-y:auto;">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Account Name</th>
                            <th>Account Type</th>
                            <th>Category</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody id="accountlist_templates"></tbody>
                </table>
            </div>
        </div>

    </div> <!-- content-wrapper -->

</div> <!-- accountsSection -->