<div id="fifu_meta_box">

    <!-- show alt field, image and link if URL was already provided -->

    <table id="fifu_table_alt" style="width:100%;position:relative;<?php echo $show_alt ?>">
        <tr>
            <td style="width:100%;padding:unset !important;">
                <input id="fifu_input_alt" 
                       type="text" 
                       name="fifu_input_alt" 
                       placeholder="<?php $fifu['common']['alt']() ?>"
                       value="<?php echo $alt; ?>" 
                       style="<?php echo $width ?>;font-size:13px;" />
            </td>
            <td style="padding:unset !important;">
                <span id="fifu_help_alt" 
                      class="dashicons dashicons-editor-help" 
                      style="font-size:20px;cursor:help;"
                      title="<?php $fifu['alt']['help']() ?>">
                </span>
            </td>
        </tr>
    </table>

    <div id="fifu_image"
         style="<?php echo $height, $show_image ?>
         background:url('<?php echo $adjustedUrl; ?>') no-repeat center center;
         background-size:cover;
         cursor:zoom-in" >
    </div>

    <table id="fifu_table_url" style="width:100%;position:relative">
        <tr>
            <td style="width:100%">
                <input id="fifu_input_url" 
                       type="text" 
                       name="fifu_input_url" 
                       placeholder="<?php $fifu['image']['keywords']() ?>"
                       value="<?php echo $url; ?>"
                       style="<?php echo $width ?>;font-size:13px;" />
            </td>
            <td>
                <span id="fifu_help" 
                      class="dashicons dashicons-editor-help" 
                      style="<?php echo $show_button . ';font-size:20px;cursor:pointer;' ?>">
                </span>
            </td>
        </tr>
    </table>

    <center>
        <a id="fifu_link" 
           onClick="removeImage();" 
           style="<?php echo $show_link ?>; cursor:pointer" ><?php $fifu['image']['remove']() ?></a>
    </center>

    <input 
        type="hidden" 
        id="fifu_input_image_width" 
        name="fifu_input_image_width" 
        value="" >

    <input 
        type="hidden" 
        id="fifu_input_image_height" 
        name="fifu_input_image_height" 
        value="" >

    <input 
        type="hidden" 
        id="fifu_keywords" 
        name="fifu_keywords" 
        value="" >

    <!-- show preview button if URL was not provided yet -->

    <a id="fifu_button" 
       class="button" 
       onClick="previewImage();" 
       style="<?php echo $align, $margin, $show_button ?>" ><?php $fifu['common']['preview']() ?></a>

    <div id="fifu_sirv_button" style="<?php echo 'float:left;padding-right:8px;' . $align, $margin, fifu_is_sirv_active() ? $show_button : 'display:none' ?>">
        <div class="sirv-modal"></div>
        <a id="sirv-add-featured-image"
           data-input-anchor="#fifu_input_url"
           href="#"
           class="button sirv-add-image-modal-click"
           title="<?php $fifu['image']['sirv']['add']() ?>"><?php $fifu['image']['sirv']['choose']() ?></a>
    </div>

    <div id="fifu_premium" style="<?php echo $show_button ?>; display:none">
        <table style="position: relative; top: 11px; background-color: #1e1e1e; color:white; width: 100%; padding: 1px; border-radius: 3px 3px 0 0;">
            <tr style="text-align: center;">
                <td style="width: 90px; font-size: 11px; background-color: #626262; border-radius: 3px; box-shadow: 1px 1px black;"><a style="color:white; text-decoration: none" target="_blank" href="https://fifu.app/" title="<?php $fifu['ads']['plans']() ?>">FIFU <b>PRO</b> €29.90</a></td>
                <td style="padding: 0px 0px" class="fifu-hover"><span title="<?php $fifu['ads']['video']() ?>" class="dashicons dashicons-video-alt3" style="font-size:15px; display: unset; vertical-align:sub;"></span></td>
                <td style="padding: 0px 0px" class="fifu-hover"><span title="<?php $fifu['ads']['audio']() ?>" class="dashicons dashicons-controls-volumeon" style="font-size:15px; display: unset; vertical-align:sub;"></span></td>
                <td style="padding: 0px 0px" class="fifu-hover"><span title="<?php $fifu['ads']['slider']() ?>" class="dashicons dashicons-images-alt2" style="font-size:15px; display: unset; vertical-align:sub;"></span></td>
                <td style="padding: 0px 0px" class="fifu-hover"><span title="<?php $fifu['ads']['gallery']() ?>" class="dashicons dashicons-cart" style="font-size:15px; display: unset; vertical-align:sub;"></span></td>
                <td style="padding: 0px 0px" class="fifu-hover"><span title="<?php $fifu['ads']['api']() ?>" class="dashicons dashicons-migrate" style="font-size:15px; display: unset; vertical-align:sub;"></span></td>
                <td style="padding: 0px 0px" class="fifu-hover"><span title="<?php $fifu['ads']['search']() ?>" class="dashicons dashicons-search" style="font-size:15px; display: unset; vertical-align:sub;"></span></td>
                <td style="padding: 0px 0px" class="fifu-hover"><span title="<?php $fifu['ads']['web']() ?>" class="dashicons dashicons-admin-site" style="font-size:15px; display: unset; vertical-align:sub;"></span></td>
            </tr>
        </table>

        <table style="position: relative; top: 12px; background-color: #007cba; color:white; width: 100%; padding: 1px; border-radius: 0 0 3px 3px;">
            <tr style="text-align: center;">
                <td style="width: 90px; font-size: 11px; background-color: #00a2f2; border-radius: 3px; box-shadow: 1px 1px black;"><a style="color:white; text-decoration: none" target="_blank" href="/wp-admin/admin.php?page=fifu-cloud" title="<?php $fifu['ads']['subscribe']() ?>">FIFU <b>Cloud</b></a></td>
                <td style="padding: 0px 0px" class="fifu-hover"><span title="<?php $fifu['ads']['storage']() ?>" class="dashicons dashicons-cloud-upload" style="font-size:17px; display: unset; vertical-align:sub;"></span></td>
                <td style="padding: 0px 0px" class="fifu-hover"><span title="<?php $fifu['ads']['wait']() ?>" class="dashicons dashicons-performance" style="font-size:17px; display: unset; vertical-align:sub;"></span></td>
                <td style="padding: 0px 0px" class="fifu-hover"><span title="<?php $fifu['ads']['process']() ?>" class="dashicons dashicons-networking" style="font-size:17px; display: unset; vertical-align:sub;"></span></td>
                <td style="padding: 0px 0px" class="fifu-hover"><span title="<?php $fifu['ads']['money']() ?>" class="dashicons dashicons-money-alt" style="font-size:17px; display: unset; vertical-align:sub;"></span></td>
                <td style="padding: 0px 0px" class="fifu-hover"><span title="<?php $fifu['ads']['crop']() ?>" class="dashicons dashicons-admin-users" style="font-size:17px; display: unset; vertical-align:sub;"></span></td>
                <td style="padding: 0px 0px" class="fifu-hover"><span title="<?php $fifu['ads']['protection']() ?>" class="dashicons dashicons-shield" style="font-size:17px; display: unset; vertical-align:sub;"></span></td>
            </tr>
        </table>
    </div>

</div>