<div class="wrap" style="opacity:0">

    <div id="dialog-message" class="custom-dialog" style="display:none;">
        <p id="dialog-message-content"></p>
    </div>

    <div class="header-box">
        <h1 style="color:white;padding-left:20px;width:98%;font-family:Ubuntu,sans-serif">
            <span class="dashicons dashicons-cloud-upload" style="font-size:30px"></span><span style="padding-left:20px">FIFU </span> <span style="color:orange">Cloud</span>
            <a href="https://gcpsignup.page.link/1J6G" target="_blank"><img loading="lazy" class="fifu-google-cloud" src="https://storage.googleapis.com/featuredimagefromurl/power-by-gcp2.png"/></a>
        </h1>        
    </div>

    <div id="tabs-top" style="float:left; width: 100%; max-width: 1214px !important;">
        <ul>
            <li><a href="#tabs-a"><i class="fas fa-info-circle"></i> <?php $fifucloud['tabs']['welcome']() ?></a></li>
            <li><a href="#tabs-f" onclick="listDailyCount()"><i class="fas fa-user-gear"></i> <?php $fifucloud['tabs']['account']() ?></a></li>
            <li><a href="#tabs-c" onclick="listAllFifu(0, null, null)"><i class="fas fa-folder-plus"></i> <?php $fifucloud['tabs']['send']() ?></a></li>
            <li><a href="#tabs-d" onclick="listAllSu(0, null, null)"><i class="fas fa-folder-minus"></i> <?php $fifucloud['tabs']['delete']() ?></a></li>
            <li><a href="#tabs-e" onclick="listAllMediaLibrary(0, null, null)"><i class="fab fa-wordpress"></i> <?php $fifucloud['tabs']['media']() ?></a></li>
        </ul>
        <div id="tabs-a" class="cloud-tab">
            <div class="first-cloud-box">
                <h2><i class="fas fa-cloud"></i> FIFU Cloud</h2>
                <div class="greybox">
                    <?php $fifucloud['support']['whats']() ?>
                    <br>
                    <br>
                    <table style="background-color: #fff; border-radius: 13px;">
                        <tr>
                            <td style="width:50%;text-align:center;border-bottom: 1px solid #ddd !important">
                                <i class="fas fa-save" style="font-size:30px"></i>
                            </td>
                            <td style="width:50%;text-align:center;border-bottom: 1px solid #ddd !important">
                                <i class="fas fa-bolt" style="font-size:30px"></i>
                            </td>
                        </tr>
                        <tr>
                            <td style="width:50%;text-align:center;border-bottom: 1px solid #ddd !important">
                                <i><?php $fifucloud['support']['save']() ?></i>
                            </td>
                            <td style="width:50%;text-align:center;border-bottom: 1px solid #ddd !important">
                                <i><?php $fifucloud['support']['fast']() ?></i>
                            </td>
                        </tr>
                        <tr>
                            <td style="vertical-align: top;">
                                <?php $fifucloud['support']['save-desc']() ?>
                            </td>
                            <td style="vertical-align: top;">
                                <?php $fifucloud['support']['fast-desc']() ?>
                            </td>
                        </tr>
                    </table>

                    <br>

                    <table style="background-color: #fff; border-radius: 13px;">
                        <tr>
                            <td style="width:50%;text-align:center;border-bottom: 1px solid #ddd !important">
                                <i class="fas fa-microchip" style="font-size:30px"></i>
                            </td>
                            <td style="width:50%;text-align:center;border-bottom: 1px solid #ddd !important">
                                <i class="fas fa-money-bill-alt" style="font-size:30px"></i>
                            </td>
                        </tr>
                        <tr>
                            <td style="width:50%;text-align:center;border-bottom: 1px solid #ddd !important">
                                <i><?php $fifucloud['support']['process']() ?></i>
                            </td>
                            <td style="width:50%;text-align:center;border-bottom: 1px solid #ddd !important">
                                <i><?php $fifucloud['support']['price']() ?></i>
                            </td>
                        </tr>
                        <tr>
                            <td style="vertical-align: top;">
                                <?php $fifucloud['support']['process-desc']() ?>
                            </td>
                            <td style="vertical-align: top;">
                                <?php $fifucloud['support']['price-desc2']() ?>
                            </td>
                        </tr>
                    </table>

                    <br>

                    <table style="background-color: #fff; border-radius: 13px;">
                        <tr>
                            <td style="width:50%;text-align:center;border-bottom: 1px solid #ddd !important">
                                <i class="fa-solid fa-users-viewfinder" style="font-size:30px"></i>
                            </td>
                            <td style="width:50%;text-align:center;border-bottom: 1px solid #ddd !important">
                                <i class="fa-solid fa-shield-halved" style="font-size:30px"></i>
                            </td>
                        </tr>
                        <tr>
                            <td style="width:50%;text-align:center;border-bottom: 1px solid #ddd !important">
                                <i><?php $fifucloud['support']['smart']() ?></i>
                            </td>
                            <td style="width:50%;text-align:center;border-bottom: 1px solid #ddd !important">
                                <i><?php $fifucloud['support']['hotlink']() ?></i>
                            </td>
                        </tr>
                        <tr>
                            <td style="vertical-align: top;">
                                <?php $fifucloud['support']['smart-desc']() ?>
                            </td>
                            <td style="vertical-align: top;">
                                <?php $fifucloud['support']['hotlink-desc']() ?>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>

            <div class="fifubox">
                <h2>
                    <i class="fas fa-money-bill-alt"></i> <?php $fifucloud['title']['price']() ?>
                </h2>
                <div class="greybox">
                    <?php $fifucloud['pricing']['desc']() ?> 
                    <br>
                    <br>
                    <div style="background-color:#32373c; text-align:left; color:white; padding:8px; border-radius:5px;">
                        <b><?php $fifucloud['pricing']['example']() ?></b>
                    </div>
                    <table style="text-align:left; width:100%; background-color:white;">
                        <tr class="color">
                            <th style="font-weight:bold;">
                                <?php $fifucloud['pricing']['table']['interval']() ?>
                            </th>
                            <th style="font-weight:bold;">
                                <?php $fifucloud['pricing']['table']['days']() ?>
                            </th>
                            <th style="font-weight:bold;">
                                <?php $fifucloud['pricing']['table']['stored']() ?>
                            </th>
                        </tr>
                        <tr class="color">
                            <td>
                                01-02
                            </td>
                            <td>
                                2
                            </td>
                            <td>
                                514
                            </td>
                        </tr>
                        <tr class="color">
                            <td>
                                03-11
                            </td>
                            <td>
                                9
                            </td>
                            <td>
                                1320
                            </td>
                        </tr>
                        <tr class="color">
                            <td>
                                12-18
                            </td>
                            <td>
                                7
                            </td>
                            <td>
                                2158
                            </td>
                        </tr>
                        <tr class="color">
                            <td>
                                19-26
                            </td>
                            <td>
                                8
                            </td>
                            <td>
                                1550
                            </td>
                        </tr>
                        <tr class="color">
                            <td>
                                27-30
                            </td>
                            <td>
                                4
                            </td>
                            <td>
                                2609
                            </td>
                        </tr>
                        <tr></tr>
                    </table>
                    <table style="text-align:left; width:100%; background-color:white;">
                        <tr class="color">
                            <th style="font-weight:bold">
                                <?php $fifucloud['pricing']['table']['average']() ?>
                            </th>
                            <th>
                                (2 x 514 + 9 x 1320 + 7 x 2158 + 8 x 1550 + 4 x 2609) / 30 = 1695
                            </th>
                        </tr>
                        <tr class="color">
                            <td style="font-weight:bold">
                                <?php $fifucloud['pricing']['table']['price']() ?>
                            </td>
                            <td>
                                €0.001
                            </td>
                        </tr>
                        <tr class="color">
                            <td style="font-weight:bold">
                                <?php $fifucloud['pricing']['table']['total']() ?>
                            </td>
                            <td>
                                1695 x €0.001 = €1.69
                            </td>
                        </tr>
                    </table>
                    <br>
                    <?php $fifucloud['pricing']['thumbnails']() ?>
                </div>
            </div>            
        </div>

        <div id="tabs-c" class="cloud-tab">
            <div id="add-box" class="first-cloud-box">
                <h2>
                    <i class="fas fa-folder-plus"></i> <?php $fifucloud['title']['add']() ?>
                </h2>
                <div class="greybox">
                    <?php $fifucloud['upload']['desc']() ?>
                    <br>
                    <br>
                    <select id="su-select-search" style="width: 18%;">
                        <option value="title"><?php $fifucloud['column']['title']() ?></option>
                        <option value="url"><?php $fifucloud['search']['url']() ?></option>
                    </select>
                    <input type="text" id="su-input-search" value="" style="width: 62%;">
                    <button id="su-button-search" onclick="search('upload')" style="width:18%; height:28px;"><i class="fa-solid fa-magnifying-glass"></i> <?php $fifucloud['search']['search']() ?></button>
                    <br>
                    <br>
                    <div style="background: white; padding: 10px; border-radius: 1em;">
                        <table id="addTable" class="display cell-border">
                            <thead>
                                <tr>
                                    <th><?php $fifucloud['column']['image']() ?></th>
                                    <th><?php $fifucloud['column']['title']() ?></th>
                                    <th><?php $fifucloud['column']['published']() ?></th>
                                    <th><?php $fifucloud['column']['id']() ?></th>
                                    <th><?php $fifucloud['column']['location']() ?></th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                    <br>
                    <div style="background: white; padding: 10px; border-radius: 1em;">
                        <div style="background-color:#32373c; text-align:center; width:98%; color:white; padding:6px; border-radius:5px;">
                            <b><?php $fifucloud['keys']['header']() ?></b>
                        </div>
                        <table style="text-align:left; width:100%">

                            <tr class="color">
                                <th>
                                    <?php $fifucloud['keys']['non-adjacent']() ?>
                                </th>
                                <th>
                                    <?php $fifucloud['keys']['ctrl']() ?>
                                </th>
                            </tr>
                            <tr class="color">
                                <th>
                                    <?php $fifucloud['keys']['adjacent']() ?>
                                </th>
                                <th>
                                    <?php $fifucloud['keys']['shift']() ?>
                                </th>
                            </tr>
                        </table>
                    </div>

                    <div id="upload-auto-box">
                        <br>
                        <div style="background: white; padding: 10px; border-radius: 1em;">                        
                            <div style="background-color:#32373c; text-align:center; width:98%; color:white; padding:6px; border-radius:5px;">
                                <b><?php $fifucloud['upload']['automatic']['title']() ?></b>
                            </div>
                            <table style="text-align:left; width:100%">

                                <tr class="color">
                                    <th style="width:20px;">
                                        <form
                                            id="fifu_form_cloud_upload_auto"
                                            action="javascript:void(0)"
                                            method="post">
                                                <?php wp_nonce_field(FIFU_ACTION_CLOUD, 'nonce_fifu_form_cloud_upload_auto'); ?>
                                            <input
                                                type="submit"
                                                href="javascript:void(0)"
                                                id="fifu_toggle_cloud_upload_auto"
                                                onclick="invert('cloud_upload_auto');set_upload_auto()"
                                                name="fifu_toggle_cloud_upload_auto"
                                                class="<?php echo $enable_cloud_upload_auto; ?>"
                                                value=""
                                                style="display:block;border:none">

                                            <input
                                                type="hidden"
                                                id="fifu_input_cloud_upload_auto"
                                                name="fifu_input_cloud_upload_auto"
                                                value="" >
                                        </form>
                                    </th>
                                    <th>
                                        <?php $fifucloud['upload']['automatic']['desc']() ?>
                                    </th>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="tabs-d" class="cloud-tab">
            <div id="delete-box" class="first-cloud-box">
                <h2>
                    <i class="fas fa-folder-minus"></i> <?php $fifucloud['title']['delete']() ?>
                </h2>
                <div class="greybox">
                    <?php $fifucloud['delete']['desc']() ?>
                    <br>
                    <br>
                    <select id="su-delete-select-search" style="width: 18%;">
                        <option value="url"><?php $fifucloud['search']['url']() ?></option>
                        <option value="postid"><?php $fifucloud['column']['id']() ?></option>
                    </select>
                    <input type="text" id="su-delete-input-search" value="" style="width: 62%;">
                    <button id="su-delete-button-search" onclick="search('delete')" style="width:18%; height:28px;"><i class="fa-solid fa-magnifying-glass"></i> <?php $fifucloud['search']['search']() ?></button>
                    <br>
                    <br>
                    <div style="background: white; padding: 10px; border-radius: 1em;">
                        <table id="removeTable" class="display cell-border">
                            <thead>
                                <tr>
                                    <th><?php $fifucloud['column']['image']() ?></th>
                                    <th><?php $fifucloud['column']['title']() ?></th>
                                    <th><?php $fifucloud['column']['upload']() ?></th>
                                    <th><?php $fifucloud['column']['id']() ?></th>
                                    <th><?php $fifucloud['column']['location']() ?></th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>

                    <div id="delete-auto-box">
                        <br>
                        <div style="background: white; padding: 10px; border-radius: 1em;">                        
                            <div style="background-color:#32373c; text-align:center; width:98%; color:white; padding:6px; border-radius:5px;">
                                <b><?php $fifucloud['delete']['automatic']['title']() ?></b>
                            </div>
                            <table style="text-align:left; width:100%">

                                <tr class="color">
                                    <th style="width:20px;">
                                        <form
                                            id="fifu_form_cloud_delete_auto"
                                            action="javascript:void(0)"
                                            method="post">
                                                <?php wp_nonce_field(FIFU_ACTION_CLOUD, 'nonce_fifu_form_cloud_delete_auto'); ?>
                                            <input
                                                type="submit"
                                                href="javascript:void(0)"
                                                id="fifu_toggle_cloud_delete_auto"
                                                onclick="invert('cloud_delete_auto');set_delete_auto();fifu_api_cron('fifu_toggle_cloud_delete_auto')"
                                                name="fifu_toggle_cloud_delete_auto"
                                                class="<?php echo $enable_cloud_delete_auto; ?>"
                                                value=""
                                                style="display:block;border:none">

                                            <input
                                                type="hidden"
                                                id="fifu_input_cloud_delete_auto"
                                                name="fifu_input_cloud_delete_auto"
                                                value="" >
                                        </form>
                                    </th>
                                    <th>
                                        <?php $fifucloud['delete']['automatic']['desc']() ?>
                                    </th>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="tabs-e" class="cloud-tab">
            <div id="media-box" class="first-cloud-box">
                <div class="fifu-pro"><a class="fifu-pro-link" href="https://fifu.app/" target="_blank" title="<?php $fifucloud['unlock']() ?>"><span class="dashicons dashicons-lock fifu-pro-icon"></span></a></div>
                <h2>
                    <i class="fab fa-wordpress"></i> <?php $fifucloud['title']['media']() ?>
                </h2>
                <div class="greybox">
                    <?php $fifucloud['media']['desc']() ?>
                    <br>
                    <br>
                    <select id="su-media-select-search" style="width: 18%;">
                        <option value="title"><?php $fifucloud['column']['title']() ?></option>
                        <option value="postid"><?php $fifucloud['column']['id']() ?></option>
                    </select>
                    <input type="text" id="su-media-input-search" value="" style="width: 62%;">
                    <button id="su-media-button-search" onclick="search('media')" style="width:18%; height:28px;"><i class="fa-solid fa-magnifying-glass"></i> <?php $fifucloud['search']['search']() ?></button>
                    <br>
                    <br>

                    <div style="background: white; padding: 10px; border-radius: 1em;">
                        <table id="mediaTable" class="display cell-border">
                            <thead>
                                <tr>
                                    <th><?php $fifucloud['column']['featured']() ?></th>
                                    <th><?php $fifucloud['column']['title']() ?></th>
                                    <th><?php $fifucloud['column']['published']() ?></th>
                                    <th><?php $fifucloud['column']['id']() ?></th>
                                    <th><?php $fifucloud['column']['gallery']() ?></th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div id="tabs-f" class="cloud-tab">

            <div id="account-box" class="first-cloud-box">
                <h2>
                    <i class="fa-solid fa-circle-user"></i> <?php $fifucloud['title']['account']() ?>
                </h2>
                <div class="greybox">
                    <form
                        id="fifu_su_form_login"
                        action="javascript:void(0)"
                        method="post">
                        <table style="width:100%">
                            <tr>
                                <td>
                                    <table style="min-width:356px;">
                                        <tr id="tr_su_email">
                                            <td>
                                                <label for="su_email" title="<?php $fifucloud['label']['title']['email']() ?>"><?php $fifucloud['label']['email']() ?>: </label>
                                            </td>
                                            <td>
                                                <input id="su_email" type="email" required maxlength="64" title="<?php $fifucloud['signup']['email']['message']() ?>" style="width:100%">
                                            </td>
                                        </tr>
                                        <tr id="tr_su_site">
                                            <td>
                                                <label for="su_site"><?php $fifucloud['label']['website']() ?>: </label>
                                            </td>
                                            <td>
                                                <input id="su_site"
                                                       value='<?php echo fifu_get_home_url() ?>' style="width:100%; padding:inherit; height:28px;" readonly>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                            </td>
                                            <td>
                                                <div style="float:left; width:142px">
                                                    <button id="su-sign-up-button" onclick="signUp()" style="width:100%; height:28px;" disabled><i class="fas fa-user-edit"></i> <?php $fifucloud['signup']['button']() ?></button>
                                                </div>
                                                <div style="float:right; width:214px">
                                                    <button id="su_reset_button" onclick="resetCredentials()" style="height:28px; width:100%"><i class="fa-solid fa-arrows-rotate"></i> <?php $fifucloud['reset']['button']() ?></button>
                                                </div>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>

            <div id="billing-box" class="fifubox">
                <h2>
                    <i class="fas fa-money-bill-alt"></i> <?php $fifucloud['title']['billing']() ?>
                </h2>
                <div class="greybox">
                    <?php $fifucloud['billing']['desc']() ?>
                    <br>
                    <br>

                    <div style="background: white; padding: 10px; border-radius: 1em;">
                        <div style="background-color:#32373c; text-align:left; color:white; padding:8px; border-radius:5px;">
                            <b><?php $fifucloud['billing']['current']() ?></b>
                        </div>
                        <table style="text-align:left; width:100%">

                            <tr class="color">
                                <th style="width: 25%;">
                                    <?php $fifucloud['billing']['column']['start']() ?>
                                </th>
                                <th style="width: 25%;">
                                    <?php $fifucloud['billing']['column']['end']() ?>
                                </th>
                                <th style="width: 25%;">
                                    <?php $fifucloud['billing']['column']['average']() ?>
                                </th>
                                <th style="width: 25%;">
                                    <?php $fifucloud['billing']['column']['cost']() ?>
                                </th>
                            </tr>
                            <tr class="color">
                                <th id="billing-start"></th>
                                <th id="billing-end"></th>
                                <th id="billing-average"></th>
                                <th id="billing-cost"></th>
                            </tr>
                        </table>
                    </div>

                    <br>

                    <div style="background: white; padding: 10px; border-radius: 1em;">
                        <table id="billingTable" class="display cell-border">
                            <thead>
                                <tr>
                                    <th><?php $fifucloud['column']['date']() ?></th>
                                    <th><?php $fifucloud['column']['number']() ?></th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>

                    <br>

                    <table class="display cell-border">
                        <thead>
                            <tr>
                                <th>
                                    <button id="su-cancel-button" onclick="cancel()" style="height:28px; width:100%" disabled><i class="fa-solid fa-ban"></i> <?php $fifucloud['close']['button']() ?></button>
                                </th>
                                <th>
                                    <button id="su-payment-info-button" onclick="payment_info()" style="height:28px; width:100%" disabled><i class="fa-solid fa-credit-card"></i> <?php $fifucloud['update']['button']() ?></button>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>

            <div id="hotlink-box" class="fifubox">
                <h2>
                    <i class="fa-solid fa-shield-halved"></i> <?php $fifucloud['title']['hotlink']() ?>
                </h2>
                <div class="greybox">
                    <form
                        id="fifu_form_cloud_hotlink"
                        action="javascript:void(0)"
                        method="post">
                            <?php wp_nonce_field(FIFU_ACTION_CLOUD, 'nonce_fifu_form_cloud_hotlink'); ?>
                        <input
                            type="submit"
                            href="javascript:void(0)"
                            id="fifu_toggle_cloud_hotlink"
                            onclick="invert('cloud_hotlink');set_hotlink()"
                            name="fifu_toggle_cloud_hotlink"
                            class="<?php echo $enable_cloud_hotlink; ?>"
                            value=""
                            style="display:block;border:none">

                        <input
                            type="hidden"
                            id="fifu_input_cloud_hotlink"
                            name="fifu_input_cloud_hotlink"
                            value="" >
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div id="su-dialog-remove" title="<?php $fifucloud['delete']['dialog']['title']() ?>" style="display: none;">
        <p>
            <?php $fifucloud['delete']['dialog']['sure']() ?>
        </p>
    </div>

    <div id="su-dialog-cancel" title="<?php $fifucloud['close']['title']() ?>" style="display: none;">
        <p>
            <?php $fifucloud['close']['delete']() ?>
        </p>
    </div>
</div>