<div class="fab-container">
    <div class="grid gap-2 p-2">
        <a 
            href="<?php echo esc_url( $preview_url ); ?>" 
            target="_blank" 
            style="background-color: #007cba; width: 100%; display: block; text-align: center;"
            class="py-2 text-white rounded"
        >
            <i class="fa fa-eye pr-2"></i>
            <?php esc_html_e( 'Preview', 'floating-awesome-button' ); ?>
        </a>
        <a 
            href="<?php echo esc_url( $clone_url ); ?>" 
            target="_blank" 
            style="background-color: #007cba; width: 100%; display: block; text-align: center;"
            class="py-2 text-white rounded"
        >
            <i class="fa fa-clone pr-2"></i>
            <?php esc_html_e( 'Clone', 'floating-awesome-button' ); ?>
        </a>
        <?php foreach ( apply_filters( 'fab_metabox_actions', array() ) as $fab_action ) : ?>
            <a 
                href="<?php echo esc_url( $fab_action['url'] ); ?>" 
                target="<?php echo esc_attr( $fab_action['target'] ); ?>"
                style="background-color: #007cba; width: 100%; display: block; text-align: center;"
                class="py-2 text-white rounded"
            >
                <i class="fa <?php echo esc_attr( $fab_action['icon'] ); ?> pr-2"></i>
                <?php echo esc_html( $fab_action['label'] ); ?>
            </a>
        <?php endforeach; ?>
    </div>

    <div class="p-2 overflow-x-auto">
        <h3 class="font-bold mb-2"><?php esc_html_e( 'Available Placeholders', 'floating-awesome-button' ); ?></h3>
        <p class="mb-4">
            <?php esc_html_e( 'You can use these placeholders in your title, content, or link to dynamically insert values.', 'floating-awesome-button' ); ?>
            <a href="<?php echo esc_url( \FAB()->Helper->get_documentation( 12222 ) ); ?>" target="_blank" class="text-blue-500 hover:text-blue-700">
                <?php esc_html_e( 'Learn more about placeholders.', 'floating-awesome-button' ); ?>
            </a>
        </p>
        
        <table class="w-full border-collapse border border-gray-300">
            <thead>
                <tr class="bg-gray-100">
                    <th class="border border-gray-300 p-2 text-left"><?php esc_html_e( 'Placeholder', 'floating-awesome-button' ); ?></th>
                    <th class="border border-gray-300 p-2 text-left"><?php esc_html_e( 'Description', 'floating-awesome-button' ); ?></th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ( apply_filters( 'fab_placeholders_description', array() ) as $placeholder => $description ) : ?>
                    <tr>
                        <td class="border border-gray-300 p-2"><code><?php echo esc_html( $placeholder ); ?></code></td>
                        <td class="border border-gray-300 p-2"><?php echo esc_html( $description ); ?></td>
                    </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
</div>
