<?php
/**
 * @package MatrixAddons
 * @subpackage trainifyframework
 * @since trainifyframework 1.0.0
 * @version 1.0.0
 * @description this file for icon field
 */
?>
<div class="tff-widget-field-wrapper trainify-framework-icons-wrapper <?php echo esc_attr($trainify_framework_widget_field_wraper); ?>">
    <div class="trainify-framework-icon-preview">
        <?php if( !empty( $trainify_framework_widget_field_value ) ) { echo '<i class="fa '. esc_attr( $trainify_framework_widget_field_value ).'"></i>'; } ?>
    </div>
    <div class="icon-toggle">
        <?php echo ( empty( $trainify_framework_widget_field_value )? esc_html__('Add Icon','trainify'): esc_html__('Edit Icon','trainify') ); ?>
        <span class="dashicons dashicons-arrow-down"></span>
    </div>
    <div class="icons-list-wrapper hidden">
        <input class="icon-search widefat" type="text" placeholder="<?php esc_attr_e('Search Icon','trainify')?>">
        <?php
        $trainify_framework_icons_list = trainify_framework_fa_iconslist();
        foreach ( $trainify_framework_icons_list as $single_icon ) {
            if( $trainify_framework_widget_field_value == $single_icon ) {
                echo '<span class="single-icon selected"><i class="fa '. esc_attr( $single_icon ) .'"></i></span>';
            } else {
                echo '<span class="single-icon"><i class="fa '. esc_attr( $single_icon ) .'"></i></span>';
            }
        }
        ?>
    </div>
    <input class="widefat tff-icon-value <?php echo esc_attr($trainify_framework_widget_relation_class); ?>" id="<?php echo esc_attr( $trainifyframeworkwidget->get_field_id( $trainify_framework_widget_field_name ) ); ?>" type="hidden" name="<?php echo esc_attr( $trainifyframeworkwidget->get_field_name( $trainify_framework_widget_field_name ) ); ?>" value="<?php echo esc_attr( $trainify_framework_widget_field_value ); ?>" placeholder="fa-desktop"  data-relations="<?php echo esc_attr($trainify_framework_widget_relation_json) ?>"/>
</div>