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

$kirilkirkovwipdf_choosed_template = get_option($Config::INPUTS_PREFIX.'current_template');
?>
<table class="form-table templates-settings">
    <tr valign="top">
        <th scope="row" class="align-middle">
            <div class="th-div">
                <span class="mr-5"><?php esc_html_e( 'Choose template for invoices', 'kirilkirkov-pdf-invoice-manager' ); ?></span>
                <a class="show-info" data-info="<?php esc_attr_e( 'You have option to choose between multiple templates for the invoices you create', 'kirilkirkov-pdf-invoice-manager' ) ?>" href="javascript:;"></a>
            </div>
        </th>

        <td class="vertical-align-top">
            <div>
                <div class="mb-4 template">
                    <div class="mb-2">
                        <input type="radio" id="kk-wp-invoices-template-creative" name="<?php echo esc_attr($Config::INPUTS_PREFIX).'current_template'; ?>" value="creative" <?php echo !$kirilkirkovwipdf_choosed_template || $kirilkirkovwipdf_choosed_template === 'creative' ? 'checked' : ''; ?>>
                        <label for="kk-wp-invoices-template-creative">Creative</label>
                    </div>
                    <img class="w-full max-w-400p" src="<?php echo esc_url(plugins_url('../../Assets/Img/Template_examples/creative.png', __FILE__ )); ?>" alt="<?php echo esc_attr( 'Creative' ) ?>" />
                </div>

                <div class="template">
                    <div class="mb-2">
                        <input type="radio" id="kk-wp-invoices-template-apple" name="<?php echo esc_attr($Config::INPUTS_PREFIX).'current_template'; ?>" value="apple" <?php echo $kirilkirkovwipdf_choosed_template && $kirilkirkovwipdf_choosed_template === 'apple' ? 'checked' : ''; ?>>
                        <label for="kk-wp-invoices-template-apple">Apple</label>
                    </div>
                    <img class="w-full max-w-400p" src="<?php echo esc_url(plugins_url('../../Assets/Img/Template_examples/apple.png', __FILE__ )); ?>" alt="<?php echo esc_attr( 'Apple' ) ?>" />
                </div>
            </div>
        </td>

        <td class="vertical-align-top">
            <div>
                <div class="mb-4 template">
                    <div class="mb-2">
                        <input type="radio" id="kk-wp-invoices-template-classic" name="<?php echo esc_attr($Config::INPUTS_PREFIX).'current_template'; ?>" value="classic" <?php echo $kirilkirkovwipdf_choosed_template && $kirilkirkovwipdf_choosed_template === 'classic' ? 'checked' : ''; ?>>
                        <label for="kk-wp-invoices-template-classic">Classic</label>
                    </div>
                    <img class="w-full max-w-400p" src="<?php echo esc_url(plugins_url('../../Assets/Img/Template_examples/classic.png', __FILE__ )); ?>" alt="<?php echo esc_attr( 'Classic' ) ?>" />
                </div>

                <div class="template">
                    <div class="mb-2">
                        <input type="radio" id="kk-wp-invoices-template-designer" name="<?php echo esc_attr($Config::INPUTS_PREFIX).'current_template'; ?>" value="designer" <?php echo $kirilkirkovwipdf_choosed_template && $kirilkirkovwipdf_choosed_template === 'designer' ? 'checked' : ''; ?>>
                        <label for="kk-wp-invoices-template-designer">Designer</label>
                    </div>
                    <img class="w-full max-w-400p" src="<?php echo esc_url(plugins_url('../../Assets/Img/Template_examples/designer.png', __FILE__ )); ?>" alt="<?php echo esc_attr( 'Designer' ) ?>" />
                </div>
            </div>
        </td>

    </tr>
</table>
<input type="hidden" name="page_options" value="<?php echo esc_attr(sanitize_text_field($Config::TEMPLATES_INPUT_GROUP)); ?>" />
<?php settings_fields($Config::TEMPLATES_INPUT_GROUP); ?>