<?php if (!defined('ABSPATH')) exit; ?>
<div class="h-100 w-100 pt-4 d-flex gap-4">
    <div class="container">
        <div class="row g-2">
            <div class="col-lg-6 g-2 d-flex flex-column">
                <div class="bg-white rounded ass-shadow ass-dashboard-card p-2 pb-3 position-relative m-0">
                    <div class="d-flex justify-content-between align-items-center gap-2 mt-2 mb-4 ms-2">
                        <div class="d-flex justify-content-center align-items-center">
                            <i class="bi bi-person fs-5"></i> 
                            <h5 class="fw-bold mb-0 ms-1"> <?php esc_html_e('Account', 'assistini') ?></h5>
                        </div>

                        <p class="fs-6 lh-1 mb-0 pe-2"><?php esc_html_e('Licence:', 'assistini'); ?>
                            <span class="ass-sidebar-licence-name text-secondary"><?php echo esc_html(ASSI_Tools::getPlanName((defined('ASSI_ACCOUNT_PLAN_ID') ? (int) ASSI_ACCOUNT_PLAN_ID : 0))); ?></span>
                        </p>

                    </div>
                    <div class="px-2">
                        <div class="d-flex flex-column gap-2">
                            <div class="ass-global-alert alert alert-sm alert-danger mb-1 p-2" data-alert-id="lost_connection" style="display:none;">
                                <div class="d-flex gap-2 align-items-center">
                                    <i class="bi bi-exclamation-diamond ass-size-18"></i>
                                    <span class="ass-size-14"><?php /* translators: 1: user account email address */ printf(esc_html__('Your account connection has been disconnected. Please reconnect to continue. You\'ve used %s before.', 'assistini'), '<a class="ass-global-alert-lost-connection-email" href="#"></a>'); ?> </span>
                                    <button type="button" class="ass-alert-close-lost-connection btn-close ass-size-12 align-self-start" aria-label="Close"></button>
                                </div>
                            </div>
                            <!--case 1: blog / user not connected -- blog has not get every bonus at time.-->
                            <div class="ass-account-case-one ass-flex flex-column gap-2">
                                <span class="ass-size-14"><b><i class="bi bi-gift fs-5 text-secondary"></i> <?php esc_html_e('Get 10,000 bonus words', 'assistini'); ?></b></span>
                                <span class="ass-size-14"><?php esc_html_e('Receive 10,000 extra words for your first month – whether you\'re new to Assistini or already have an account. No subscription. No commitments. Just start creating.', 'assistini'); ?></span>
                            </div>
                            <!--case 2: blog / user not connected -- blog has got welcome bonus at time.-->
                            <div class="ass-account-case-two">
                                <span class="ass-size-14"><?php esc_html_e('Register or log in – whether you\'re new to Assistini or already have an account.', 'assistini'); ?></span>
                            </div>


                            <div class="ass-account-email-input ass-flex flex-column mt-2">
                                <span class="mt-2 ass-size-14"><?php esc_html_e('Enter your email address:', 'assistini'); ?></span>
                                <input type="email" class="form-control ass-form-control" id="ass-account-email" placeholder="<?php esc_attr_e('Email address', 'assistini'); ?>">
                            </div>
                            <!--case 1: blog / user not connected -- blog has not get every bonus at time.-->
                            <div class="ass-account-case-one">
                                <span class="mt-2 ass-size-14"><b><?php esc_html_e('Let\'s link your account and activate your bonus.', 'assistini'); ?></b></span>
                            </div>

                            <!--case 3: blog / user is connected.-->
                            <div class="ass-account-case-three">
                                <span class="mt-2 ass-size-14">
                                    <b><?php esc_html_e('Your blog is linked to your Assistini account', 'assistini'); ?>:</b>
                                    <b><span class="ass-size-14 text-primary ass-account-display-name">
                                        
                                    </b></span>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex justify-content-end px-2 pt-2">
                        <div class="ass-account-case-one ass-flex">
                            <button class="ass-account-connect-btn btn btn-sm btn-secondary mt-2"><?php esc_html_e('Continue', 'assistini'); ?></button>
                        </div>
                        <div class="ass-account-case-two ass-flex">
                            <button class="ass-account-connect-btn btn btn-sm btn-secondary mt-2"><?php esc_html_e('Continue', 'assistini'); ?></button>
                        </div>
                        <div class="ass-account-case-three ass-flex justify-content-between w-100">
                            <div class="d-flex justify-content-center align-items-center">
                                <a class="btn btn-sm btn-outline-primary mt-2 me-2" target="_blank" rel="noopener noreferrer" href="https://app.assistini.com/?screen=Account"><?php esc_html_e('Account Settings', 'assistini'); ?></a>
                                <a class="btn btn-sm btn-outline-primary mt-2" target="_blank" rel="noopener noreferrer" href="https://app.assistini.com/?screen=Plan"><?php esc_html_e('Upgrade Plan', 'assistini'); ?></a>
                            </div>
                            <a class="ass-account-remove-btn btn btn-sm btn-secondary mt-2"><?php esc_html_e('Remove', 'assistini'); ?></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>