<?php if (!defined('ABSPATH')) exit; ?>

<div class="h-100 w-100 pt-4 d-flex gap-4 position-relative">
    <div class="container">
        <h1 class="h3 mb-3"><i class="bi bi-file-earmark-text"></i><?php esc_html_e('Templates', 'assistini') ?></h1>
        <div class="row">
            <div class="col-12 h-100 ass-templates-blocked">
                <div class="pb-3">
                    <i class="bi bi-exclamation-circle text-danger ass-size-20 pb-2"></i>
                    <span><?php esc_html_e('You need to Sign up with Assistini to use this Feature!', 'assistini'); ?></span>
                    <button class="btn btn-sm btn-primary mt-3 mb-0 ass-oauth-start-btn"><?php esc_html_e('Sign up for free', 'assistini') ?></button>
                </div>
            </div>
        </div>
        <div class="row justify-content-between mt-3">
            <div class="col-auto">
                <ul class="nav nav-pills">
                    <li class="nav-item me-1">
                        <button class="ass-templates-nav-btn nav-link ass-templates-nav-active" data-type="all"><?php esc_html_e('All', 'assistini'); ?></button>
                    </li>
                    <li class="nav-item me-1">
                        <button class="ass-templates-nav-btn nav-link" data-type="my"><?php esc_html_e('My', 'assistini'); ?></button>
                    </li>
                    <li class="nav-item me-1">
                        <button class="ass-templates-nav-btn nav-link" data-type="system"><?php esc_html_e('Assistini', 'assistini'); ?></button>
                    </li>
                </ul>
            </div>
            <div class="col-auto my-1 ps-1 d-flex align-items-center">
                <div class="btn btn-sm ass-templates-add-count text-center border rounded py-1 px-2 me-1">
                    <span class="ass-size-13"><span class="ass-templates-add-count-open">0</span> <?php esc_html_e('remaining of', 'assistini'); ?> <span class="ass-templates-add-count-total"><?php echo (defined('ASSI_ACCOUNT_MAX_TEMPLATES') ? (int) ASSI_ACCOUNT_MAX_TEMPLATES : 0); ?></span></span>
                </div>
                <button type="submit" class="btn btn-sm btn-primary px-5 ass-templates-add">+ <?php esc_html_e('Create template', 'assistini'); ?></button>
            </div>
        </div>
        <div class="row clearfix ass-templates-list-placeholder">
            <?php
            for ($assi_i = 1; $assi_i <= 6; $assi_i++) {
                ?>
                <div class="col-12 col-md-6 col-lg-4 mt-3 ass-templates-item placeholder-wave">
                    <div class="card ass-templates-card-shadow m-0 w-100 h-100 placeholder">
                        <div class="row">
                            <div class="col-12 p-0">
                                <div class="d-flex justify-content-between" style="font-weight: 500;">
                                    <div class="ass-templates-item-name text-truncate me-2">Placeholder</div>
                                </div>
                            </div>
                            <div class="ass-templates-item-prompt col-12 my-3 ass-size-13 ass-truncate-lines-2">Placeholder</div>
                        </div>
                        <div class="row justify-content-end mt-auto ass-size-13">
                            <span class="col-auto">Placeholder</span>
                        </div>
                    </div>
                </div>
                <?php
            }
            ?>
        </div>
        <div class="row clearfix ass-templates-list-empty w-100 align-items-center" style="display:none;">
            <div class="ass-templates-list-empty-card col-12 col-md-6 col-lg-4 mt-3">
                <div class="card ass-templates-card-shadow m-0 w-100 h-100">
                    <div class="row">
                        <p class="fw-bold"><?php esc_html_e('You haven\'t created any templates yet.', 'assistini'); ?></p>
                        <span class="ms-auto col-auto btn btn-sm btn-outline-primary"><?php esc_html_e('+ Create template', 'assistini'); ?></span>
                    </div>                      
                </div>
            </div>

        </div>
        <div class="row clearfix ass-templates-list">
        </div>
        <div class="row clearfix mt-3">
            <ul class="ass-templates-pagination pagination pagination-sm justify-content-center">
                <li class="page-item"><span class="page-link"><i class="bi bi-caret-left-fill"></i></span></li>
                <li class="page-item"><span class="page-link"><i class="bi bi-caret-right-fill"></i></span></li>
            </ul>
        </div>
    </div>
</div>