<div class="ftb-segment">

    <h2><?php 
echo __( "Step 3: Button Customization", "floating-tiktok-button" );
?></h2>
    
    <div class="row">
        <div class="col-xs-3">
            <label class="ftb-label" for="button_text">
                <strong>
                    <?php 
echo __( 'Button Text', "floating-tiktok-button" );
?>
                </strong>
            </label>
        </div>
        
        <div class="col-xs-9">
        <?php 
?>
            <input id="button_text" type="text" class="ftb-input ftb-disabled" v-model="button_text" disabled />
        <?php 
?>
        </div>
    </div>

    <div class="row">

        <div class="col-xs-3">
            <label class="ftb-label" for="font_size">
                <strong>
                    <?php 
echo __( 'Font', "floating-tiktok-button" );
?>
                </strong>
            </label>
        </div>
        
        <div class="col-xs">
            <div class="ftb-grid">
            <?php 
?>
                <select class="ftb-select ftb-disabled" disabled v-model="font_size">
                    <option value="10">10 px</option>
                </select>
            <?php 
?>
                <div>
                <?php 
?>
                    <label class="ftb-icon-toggle ftb-disabled" style="width: auto;" @click="getPro('Get Pro Version to Enable Font Feature')"><input id="font_bold" type="checkbox" disabled />
                        <div class="ftb-icon-container">
                            <svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" style="width: 14px;"><path fill="currentColor" d="M333.49 238a122 122 0 0 0 27-65.21C367.87 96.49 308 32 233.42 32H34a16 16 0 0 0-16 16v48a16 16 0 0 0 16 16h31.87v288H34a16 16 0 0 0-16 16v48a16 16 0 0 0 16 16h209.32c70.8 0 134.14-51.75 141-122.4 4.74-48.45-16.39-92.06-50.83-119.6zM145.66 112h87.76a48 48 0 0 1 0 96h-87.76zm87.76 288h-87.76V288h87.76a56 56 0 0 1 0 112z"></path></svg>
                        </div>
                    </label>
                <?php 
?>
                </div>
                
                <div>
                <?php 
?>
                    <label class="ftb-icon-toggle ftb-disabled" style="width: auto;" @click="getPro('Get Pro Version to Enable Font Feature')"><input id="font_italic" type="checkbox" disabled />
                        <div class="ftb-icon-container">
                            <svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" style="width: 11px;"><path fill="currentColor" d="M320 48v32a16 16 0 0 1-16 16h-62.76l-80 320H208a16 16 0 0 1 16 16v32a16 16 0 0 1-16 16H16a16 16 0 0 1-16-16v-32a16 16 0 0 1 16-16h62.76l80-320H112a16 16 0 0 1-16-16V48a16 16 0 0 1 16-16h192a16 16 0 0 1 16 16z"></path></svg>
                        </div>
                    </label>
                <?php 
?>
                </div>
                
                <div>
                <?php 
?>
                    <label class="ftb-icon-toggle ftb-disabled" style="width: auto;" @click="getPro('Get Pro Version to Enable Font Feature')"><input id="font_underline" type="checkbox" disabled />
                        <div class="ftb-icon-container">
                            <svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style="width: 15px"><path fill="currentColor" d="M32 64h32v160c0 88.22 71.78 160 160 160s160-71.78 160-160V64h32a16 16 0 0 0 16-16V16a16 16 0 0 0-16-16H272a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h32v160a80 80 0 0 1-160 0V64h32a16 16 0 0 0 16-16V16a16 16 0 0 0-16-16H32a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16zm400 384H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"></path></svg>
                        </div>
                    </label>
                <?php 
?>
                </div>
                
                <div>
                <?php 
?>
                    <label class="ftb-icon-toggle ftb-disabled" style="width: auto;" @click="getPro('Get Pro Version to Enable Font Feature')"><input id="font_uppercase" type="checkbox" disabled  />
                        <div class="ftb-icon-container">
                            <svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" style="width: 22px"><path fill="currentColor" d="M229.88 85.69A32 32 0 0 0 199.58 64h-47.16a32 32 0 0 0-30.3 21.69L.85 426.89A16 16 0 0 0 16 448h50.62a16 16 0 0 0 15.16-10.89L100.85 384h150.3l19.07 53.11A16 16 0 0 0 285.38 448H336a16 16 0 0 0 15.16-21.11zM129.58 304L176 174.74 222.42 304zM624 160h-32a16 16 0 0 0-16 16v1.81c-18.9-11-40.58-17.81-64-17.81a128.14 128.14 0 0 0-128 128v32a128.14 128.14 0 0 0 128 128c23.42 0 45.1-6.78 64-17.81V432a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16V176a16 16 0 0 0-16-16zm-64 160a48 48 0 0 1-96 0v-32a48 48 0 0 1 96 0z"></path></svg>
                        </div>
                    </label>
                <?php 
?>
                </div>

                <div>
                    <?php 
?>
                        <input id="font_color" class="ftb-input ftb-disabled" v-model="data.font_color" style="height: 33px" disabled>
                    <?php 
?>
                </div>

            </div>
        </div>

    </div>

    <div class="row">

        <div class="col-xs">
            <label class="ftb-label" for="border_size">
                <strong>
                    <?php 
echo __( 'Border Size', "floating-tiktok-button" );
?>
                </strong>
            </label>
        </div>
        
        <div class="col-xs">
        <?php 
?>
            <input id="border_size" type="number" name="border_size" class="ftb-input ftb-disabled" v-model="border_size" disabled />
        <?php 
?>
        </div>

        <div class="col-xs">
            <label class="ftb-label" for="border_radius">
                <strong>
                    <?php 
echo __( 'Border Radius', "floating-tiktok-button" );
?>
                </strong>
            </label>
        </div>
        
        <div class="col-xs">
        <?php 
?>
            <input id="border_radius" type="number" class="ftb-input ftb-disabled"  value="5" disabled />
        <?php 
?>
        </div>

    </div>
    
    <div class="row">

        <div class="col-xs">
            <label class="ftb-label" for="border_color">
                <strong>
                    <?php 
echo __( 'Border Color', "floating-tiktok-button" );
?>
                </strong>
            </label>
        </div>
        
        <div class="col-xs">
        <?php 
?>
            <input id="border_color" class="ftb-input ftb-disabled" v-model="data.border_color" style="height: 32px" disabled>
        <?php 
?>
        </div>

        <div class="col-xs">
            <label class="ftb-label" for="bg_color">
                <strong>
                    <?php 
echo __( 'Background Color', "floating-tiktok-button" );
?>
                </strong>
            </label>
        </div>
        
        <div class="col-xs">
        <?php 
?>
            <input id="bg_color" class="ftb-input ftb-disabled" v-model="data.bg_color" style="height: 32px" disabled>
        <?php 
?>
        </div>

    </div>

    <div class="row">
        <div class="col-xs">
            <label class="ftb-label" for="img_width">
                <strong>
                    <?php 
echo __( 'Image Width', "floating-tiktok-button" );
?>
                </strong>
            </label>
        </div>
        
        <div class="col-xs">
        <?php 
?>
            <input id="img_width" type="number" class="ftb-input ftb-disabled" v-model="img_width" disabled />
        <?php 
?>
        </div>

        <div class="col-xs">
            <label class="ftb-label" for="img_height">
                <strong>
                    <?php 
echo __( 'Image Height', "floating-tiktok-button" );
?>
                </strong>
            </label>
        </div>
        
        <div class="col-xs">
        <?php 
?>
            <input id="img_height" type="number" class="ftb-input ftb-disabled" v-model="img_height" disabled  />
        <?php 
?>
        </div>
    </div>
    
    <div class="row" style="margin-bottom: 0">
        <div class="col-xs">
            <label class="ftb-label" for="img_radius">
                <strong>
                    <?php 
echo __( 'Image Radius', "floating-tiktok-button" );
?>
                </strong>
            </label>
        </div>
        
        <div class="col-xs">
        <?php 
?>
            <input id="img_radius" type="number" class="ftb-input ftb-disabled" v-model="img_radius" disabled />
        <?php 
?>
        </div>

        <div class="col-xs">
            <label class="ftb-label" for="button_padding">
                <strong>
                    <?php 
echo __( 'Button Padding', "floating-tiktok-button" );
?>
                </strong>
            </label>
        </div>
        
        <div class="col-xs">
        <?php 
?>
            <input id="button_padding" type="number" class="ftb-input ftb-disabled" v-model="button_padding" disabled />
        <?php 
?>
        </div>

    </div>

    <?php 
?>
    <div class="ftb-alert ftb-info">
    <span class="closebtn">&times;</span> 
    <?php 
echo sprintf( wp_kses( __( '<a href="%s">Get Pro version</a> to enable', "floating-tiktok-button" ), array(
    'a' => array(
        'href'   => array(),
        'target' => array(),
    ),
) ), esc_url( "admin.php?page=floating-tiktok-button-pricing" ) ) . " " . __( 'Enable Button Customization Features', "floating-tiktok-button" );
?>
    </div>
    <?php 
?>

</div>