<?php
namespace W_PcPuzzleCrosswords_Settings_General;
if( ! defined('ABSPATH')) exit;

class W_PcPuzzleCrosswords_Settings_General{
    public static function pcpuzzle_settingsPageGeneral(){

    ?>

        <!-- General Settings -->
        <div class="tab-pane fade show active" id="nav-generalSettings" 
            role="tabpanel" aria-labelledby="nav-generalSettings-tab">

            <h5> <?php echo __('General Settings', 'advanced-crossword' ); ?></h5>
            <div class="block-raised">  

                <div class="form-check form-switch my-2 label-btn">
                    <input class="form-check-input" type="checkbox" 
                        id="optRememberSettings" checked='checked'
                        v-model='settings.general.highlightAnswers'
                        />
                    <label class="form-check-label" for="optRememberSettings">
                        <?php echo __('Highglight Answers', 'advanced-crossword' ) ?>
                    </label>
                </div> 

                <div class="input-group mb-3">
                    <div :style="{'background-color': settings.general.colorCorrect, width: '25px', height: '25px', 'border-radius': '50%' }"></div>
                    <input type="text" class="form-control ms-2" placeholder="" 
                        style='max-width: 250px'
                        aria-label="" aria-describedby="button-addon1"                    
                        v-model='settings.general.colorCorrect'
                        >

                    <span class='px-2 my-1'>
                        <?php echo __('Correct Answer Background Color', 'advanced-crossword' ); ?>
                    </span>
                </div>

                <div class="input-group mb-3">
                    <div :style="{'background-color': settings.general.colorWrong, width: '25px', height: '25px', 'border-radius': '50%' }"></div>
                    <input type="text" class="form-control ms-2" placeholder="" 
                        style='max-width: 250px'
                        aria-label="" aria-describedby="button-addon1"                    
                        v-model='settings.general.colorWrong'
                        >

                    <span class='px-2 my-1'>
                        <?php echo __('Wrong Answer Background Color', 'advanced-crossword' ); ?>
                    </span>
                </div>

                <div class="input-group mb-3">

                    <input type="number" min='1'  max='10' class="form-control ms-2" placeholder="" 
                        style='max-width: 90px'
                        aria-label="" aria-describedby="button-addon1"                    
                        v-model='settings.general.timeCheck'
                        >

                    <span class='px-2 my-1'>
                        <?php echo __('Delayed time to check answers (seconds)', 'advanced-crossword' ); ?> <br>                      
                    </span>
                </div>



            </div>
        </div>

    <?php
    }
}