<div class="page-headline">
    <img src="<?php echo $this->imagePath; ?>/icons/settings.svg" alt="">
    <h3><?php _ex('Styling', 'Headline right of icon', 'borlabs-cookie'); ?></h3>
</div>
<div class="content">

    <div class="messages">
    <?php echo \BorlabsCookie\Cookie\Backend\Backend::getInstance()->getMessages(); ?>
    </div>

    <?php
    if (\BorlabsCookie\Cookie\Backend\License::getInstance()->isPluginUnlocked()) {
    ?>
    <form method="post">
        <fieldset>
            <legend><?php _ex('Cookie box', 'Headline of a fieldset', 'borlabs-cookie'); ?></legend>
            <div class="form-group">
                <div class="form-title">
                    <label for="stylingPrimaryBackgroundColor"><?php _ex('Primary background color', 'Form', 'borlabs-cookie'); ?></label>
                </div>
                <div class="form-field">
                    <input value="<?php echo $inputStylingPrimaryBackgroundColor; ?>" type="text" name="stylingPrimaryBackgroundColor" id="stylingPrimaryBackgroundColor" class="color-field">
                    <span class="description"><?php _ex('Background color of the cookie box.', 'Setting description', 'borlabs-cookie'); ?></span>
                </div>
            </div>

            <div class="form-group">
                <div class="form-title">
                    <label for="stylingSecondaryBackgroundColor"><?php _ex('Secondary background color', 'Form', 'borlabs-cookie'); ?></label>
                </div>
                <div class="form-field">
                    <input value="<?php echo $inputStylingSecondaryBackgroundColor; ?>" type="text" name="stylingSecondaryBackgroundColor" id="stylingSecondaryBackgroundColor" class="color-field">
                    <span class="description"><?php _ex('Background color of the headline of the help section.', 'Setting description', 'borlabs-cookie'); ?></span>
                </div>
            </div>

            <div class="form-group">
                <div class="form-title">
                    <label for="stylingTextColor"><?php _ex('Text color', 'Form', 'borlabs-cookie'); ?></label>
                </div>
                <div class="form-field">
                    <input value="<?php echo $inputStylingTextColor; ?>" type="text" name="stylingTextColor" id="stylingTextColor" class="color-field">
                    <span class="description"><?php _ex('The text color within the cookie box.', 'Setting description', 'borlabs-cookie'); ?></span>
                </div>
            </div>

            <div class="form-group">
                <div class="form-title">
                    <label for="stylingLinkColor"><?php _ex('Text link color', 'Form', 'borlabs-cookie'); ?></label>
                </div>
                <div class="form-field">
                    <input value="<?php echo $inputStylingLinkColor; ?>" type="text" name="stylingLinkColor" id="stylingLinkColor" class="color-field">
                    <span class="description"><?php _ex('The text link color within the cookie box.', 'Setting description', 'borlabs-cookie'); ?></span>
                </div>
            </div>

            <div class="form-group">
                <div class="form-title">
                    <label for="stylingSuccessMessageColor"><?php _ex('Text color success message', 'Form', 'borlabs-cookie'); ?></label>
                </div>
                <div class="form-field">
                    <input value="<?php echo $inputStylingSuccessMessageColor; ?>" type="text" name="stylingSuccessMessageColor" id="stylingSuccessMessageColor" class="color-field">
                    <span class="description"><?php _ex('The text color of the success message within the cookie box.', 'Setting description', 'borlabs-cookie'); ?></span>
                </div>
            </div>
        </fieldset>

        <fieldset>
            <legend><?php _ex('Cookie box - Option', 'Headline of a fieldset', 'borlabs-cookie'); ?></legend>
            <div class="form-group">
                <div class="form-title">
                    <label for="stylingCookieOptionBorderColor"><?php _ex('Border color', 'Form', 'borlabs-cookie'); ?></label>
                </div>
                <div class="form-field">
                    <input value="<?php echo $inputStylingCookieOptionBorderColor; ?>" type="text" name="stylingCookieOptionBorderColor" id="stylingCookieOptionBorderColor" class="color-field">
                    <span class="description"><?php _ex('The border color of a cookie option.', 'Setting description', 'borlabs-cookie'); ?></span>
                </div>
            </div>
        </fieldset>

        <fieldset>
            <legend><?php _ex('Cookie box - Option 1', 'Headline of a fieldset', 'borlabs-cookie'); ?></legend>
            <div class="form-group">
                <div class="form-title">
                    <label for="stylingCookieOptionBackgroundColor"><?php _ex('Background color', 'Form', 'borlabs-cookie'); ?></label>
                </div>
                <div class="form-field">
                    <input value="<?php echo $inputStylingCookieOptionBackgroundColor; ?>" type="text" name="stylingCookieOptionBackgroundColor" id="stylingCookieOptionBackgroundColor" class="color-field">
                    <span class="description"><?php _ex('The background color of a cookie option.', 'Setting description', 'borlabs-cookie'); ?></span>
                </div>
            </div>

            <div class="form-group">
                <div class="form-title">
                    <label for="stylingCookieOptionBackgroundColorHover"><?php _ex('Background color on hover', 'Form', 'borlabs-cookie'); ?></label>
                </div>
                <div class="form-field">
                    <input value="<?php echo $inputStylingCookieOptionBackgroundColorHover; ?>" type="text" name="stylingCookieOptionBackgroundColorHover" id="stylingCookieOptionBackgroundColorHover" class="color-field">
                    <span class="description"><?php _ex('The background color of a cookie option when the mouse is over the option.', 'Setting description', 'borlabs-cookie'); ?></span>
                </div>
            </div>

            <div class="form-group">
                <div class="form-title">
                    <label for="stylingCookieOptionTextColor"><?php _ex('Text color', 'Form', 'borlabs-cookie'); ?></label>
                </div>
                <div class="form-field">
                    <input value="<?php echo $inputStylingCookieOptionTextColor; ?>" type="text" name="stylingCookieOptionTextColor" id="stylingCookieOptionTextColor" class="color-field">
                    <span class="description"><?php _ex('The text color of a cookie option.', 'Setting description', 'borlabs-cookie'); ?></span>
                </div>
            </div>

            <div class="form-group">
                <div class="form-title">
                    <label for="stylingCookieOptionTextColorHover"><?php _ex('Text color on hover', 'Form', 'borlabs-cookie'); ?></label>
                </div>
                <div class="form-field">
                    <input value="<?php echo $inputStylingCookieOptionTextColorHover; ?>" type="text" name="stylingCookieOptionTextColorHover" id="stylingCookieOptionTextColorHover" class="color-field">
                    <span class="description"><?php _ex('The text color of a cookie option when the mouse is over the option.', 'Setting description', 'borlabs-cookie'); ?></span>
                </div>
            </div>
        </fieldset>

        <fieldset>
            <legend><?php _ex('Cookie box - Option 2', 'Headline of a fieldset', 'borlabs-cookie'); ?></legend>
            <div class="form-group">
                <div class="form-title">
                    <label for="stylingCookieOptionBackgroundColor2"><?php _ex('Background color', 'Form', 'borlabs-cookie'); ?></label>
                </div>
                <div class="form-field">
                    <input value="<?php echo $inputStylingCookieOptionBackgroundColor2; ?>" type="text" name="stylingCookieOptionBackgroundColor2" id="stylingCookieOptionBackgroundColor2" class="color-field">
                    <span class="description"><?php _ex('The background color of a cookie option.', 'Setting description', 'borlabs-cookie'); ?></span>
                </div>
            </div>

            <div class="form-group">
                <div class="form-title">
                    <label for="stylingCookieOptionBackgroundColorHover2"><?php _ex('Background color on hover', 'Form', 'borlabs-cookie'); ?></label>
                </div>
                <div class="form-field">
                    <input value="<?php echo $inputStylingCookieOptionBackgroundColorHover2; ?>" type="text" name="stylingCookieOptionBackgroundColorHover2" id="stylingCookieOptionBackgroundColorHover2" class="color-field">
                    <span class="description"><?php _ex('The background color of a cookie option when the mouse is over the option.', 'Setting description', 'borlabs-cookie'); ?></span>
                </div>
            </div>

            <div class="form-group">
                <div class="form-title">
                    <label for="stylingCookieOptionTextColor2"><?php _ex('Text color', 'Form', 'borlabs-cookie'); ?></label>
                </div>
                <div class="form-field">
                    <input value="<?php echo $inputStylingCookieOptionTextColor2; ?>" type="text" name="stylingCookieOptionTextColor2" id="stylingCookieOptionTextColor2" class="color-field">
                    <span class="description"><?php _ex('The text color of a cookie option.', 'Setting description', 'borlabs-cookie'); ?></span>
                </div>
            </div>

            <div class="form-group">
                <div class="form-title">
                    <label for="stylingCookieOptionTextColorHover2"><?php _ex('Text color on hover', 'Form', 'borlabs-cookie'); ?></label>
                </div>
                <div class="form-field">
                    <input value="<?php echo $inputStylingCookieOptionTextColorHover2; ?>" type="text" name="stylingCookieOptionTextColorHover2" id="stylingCookieOptionTextColorHover2" class="color-field">
                    <span class="description"><?php _ex('The text color of a cookie option when the mouse is over the option.', 'Setting description', 'borlabs-cookie'); ?></span>
                </div>
            </div>
        </fieldset>

        <fieldset>
            <legend><?php _ex('Cookie box - Option 3', 'Headline of a fieldset', 'borlabs-cookie'); ?></legend>
            <div class="form-group">
                <div class="form-title">
                    <label for="stylingCookieOptionBackgroundColor3"><?php _ex('Background color', 'Form', 'borlabs-cookie'); ?></label>
                </div>
                <div class="form-field">
                    <input value="<?php echo $inputStylingCookieOptionBackgroundColor3; ?>" type="text" name="stylingCookieOptionBackgroundColor3" id="stylingCookieOptionBackgroundColor3" class="color-field">
                    <span class="description"><?php _ex('The background color of a cookie option.', 'Setting description', 'borlabs-cookie'); ?></span>
                </div>
            </div>

            <div class="form-group">
                <div class="form-title">
                    <label for="stylingCookieOptionBackgroundColorHover3"><?php _ex('Background color on hover', 'Form', 'borlabs-cookie'); ?></label>
                </div>
                <div class="form-field">
                    <input value="<?php echo $inputStylingCookieOptionBackgroundColorHover3; ?>" type="text" name="stylingCookieOptionBackgroundColorHover3" id="stylingCookieOptionBackgroundColorHover3" class="color-field">
                    <span class="description"><?php _ex('The background color of a cookie option when the mouse is over the option.', 'Setting description', 'borlabs-cookie'); ?></span>
                </div>
            </div>

            <div class="form-group">
                <div class="form-title">
                    <label for="stylingCookieOptionTextColor3"><?php _ex('Text color', 'Form', 'borlabs-cookie'); ?></label>
                </div>
                <div class="form-field">
                    <input value="<?php echo $inputStylingCookieOptionTextColor3; ?>" type="text" name="stylingCookieOptionTextColor3" id="stylingCookieOptionTextColor3" class="color-field">
                    <span class="description"><?php _ex('The text color of a cookie option.', 'Setting description', 'borlabs-cookie'); ?></span>
                </div>
            </div>

            <div class="form-group">
                <div class="form-title">
                    <label for="stylingCookieOptionTextColorHover3"><?php _ex('Text color on hover', 'Form', 'borlabs-cookie'); ?></label>
                </div>
                <div class="form-field">
                    <input value="<?php echo $inputStylingCookieOptionTextColorHover3; ?>" type="text" name="stylingCookieOptionTextColorHover3" id="stylingCookieOptionTextColorHover3" class="color-field">
                    <span class="description"><?php _ex('The text color of a cookie option when the mouse is over the option.', 'Setting description', 'borlabs-cookie'); ?></span>
                </div>
            </div>
        </fieldset>

        <fieldset>
            <legend><?php _ex('Blocked Content Type "Default" & Opt-out box', 'Headline of a fieldset', 'borlabs-cookie'); ?></legend>
            <div class="form-group">
                <div class="form-title">
                    <label for="stylingBlockedContentBackgroundColor"><?php _ex('Background color', 'Form', 'borlabs-cookie'); ?></label>
                </div>
                <div class="form-field">
                    <input value="<?php echo $inputStylingBlockedContentBackgroundColor; ?>" type="text" name="stylingBlockedContentBackgroundColor" id="stylingBlockedContentBackgroundColor" class="color-field">
                    <span class="description"><?php _ex('The background color of the box.', 'Setting description', 'borlabs-cookie'); ?></span>
                </div>
            </div>

            <div class="form-group">
                <div class="form-title">
                    <label for="stylingBlockedContentTextColor"><?php _ex('Text color', 'Form', 'borlabs-cookie'); ?></label>
                </div>
                <div class="form-field">
                    <input value="<?php echo $inputStylingBlockedContentTextColor; ?>" type="text" name="stylingBlockedContentTextColor" id="stylingBlockedContentTextColor" class="color-field">
                    <span class="description"><?php _ex('The text color within the box.', 'Setting description', 'borlabs-cookie'); ?></span>
                </div>
            </div>

            <div class="form-group">
                <div class="form-title">
                    <label for="stylingBlockedContentButtonBackgroundColor"><?php _ex('Button background color', 'Form', 'borlabs-cookie'); ?></label>
                </div>
                <div class="form-field">
                    <input value="<?php echo $inputStylingBlockedContentButtonBackgroundColor; ?>" type="text" name="stylingBlockedContentButtonBackgroundColor" id="stylingBlockedContentButtonBackgroundColor" class="color-field">
                    <span class="description"><?php _ex('The button background color of the box.', 'Setting description', 'borlabs-cookie'); ?></span>
                </div>
            </div>

            <div class="form-group">
                <div class="form-title">
                    <label for="stylingBlockedContentButtonBackgroundColorHover"><?php _ex('Button background color on hover', 'Form', 'borlabs-cookie'); ?></label>
                </div>
                <div class="form-field">
                    <input value="<?php echo $inputStylingBlockedContentButtonBackgroundColorHover; ?>" type="text" name="stylingBlockedContentButtonBackgroundColorHover" id="stylingBlockedContentButtonBackgroundColorHover" class="color-field">
                    <span class="description"><?php _ex('The button background color of the box when the mouse is over the button.', 'Setting description', 'borlabs-cookie'); ?></span>
                </div>
            </div>

            <div class="form-group">
                <div class="form-title">
                    <label for="stylingBlockedContentButtonTextColor"><?php _ex('Button text color', 'Form', 'borlabs-cookie'); ?></label>
                </div>
                <div class="form-field">
                    <input value="<?php echo $inputStylingBlockedContentButtonTextColor; ?>" type="text" name="stylingBlockedContentButtonTextColor" id="stylingBlockedContentButtonTextColor" class="color-field">
                    <span class="description"><?php _ex('The button text color of the box.', 'Setting description', 'borlabs-cookie'); ?></span>
                </div>
            </div>

            <div class="form-group">
                <div class="form-title">
                    <label for="stylingBlockedContentButtonTextColorHover"><?php _ex('Button text color on hover', 'Form', 'borlabs-cookie'); ?></label>
                </div>
                <div class="form-field">
                    <input value="<?php echo $inputStylingBlockedContentButtonTextColorHover; ?>" type="text" name="stylingBlockedContentButtonTextColorHover" id="stylingBlockedContentButtonTextColorHover" class="color-field">
                    <span class="description"><?php _ex('The button text color of the box when the mouse is over the button.', 'Setting description', 'borlabs-cookie'); ?></span>
                </div>
            </div>

            <div class="form-group">
                <div class="form-title">
                    <label for="stylingBlockedContentSuccessMessage"><?php _ex('Text color success message', 'Form', 'borlabs-cookie'); ?></label>
                </div>
                <div class="form-field">
                    <input value="<?php echo $inputStylingBlockedContentSuccessMessage; ?>" type="text" name="stylingBlockedContentSuccessMessage" id="stylingBlockedContentSuccessMessage" class="color-field">
                    <span class="description"><?php _ex('The text color of the success message of the box.', 'Setting description', 'borlabs-cookie'); ?></span>
                </div>
            </div>
        </fieldset>

        <fieldset>
            <legend><?php _ex('Custom CSS', 'Headline of a fieldset', 'borlabs-cookie'); ?></legend>
            <div class="form-group">
                <div class="form-field">
                    <textarea name="stylingCustomCSS" id="stylingCustomCSS" cols="80" rows="5"><?php echo $textareaStylingCustomCSS; ?></textarea>
                    <span class="description"><?php /*_ex('Add one URL per line of the pages on which you do not want to show the cookie box.', 'Setting description', 'borlabs-cookie');*/ ?></span>
                </div>
            </div>

            <hr>
            <?php wp_nonce_field('borlabs_cookie_styling'); ?>
            <input type="hidden" name="formSend" value="1">
            <input class="button-primary" type="submit" value="<?php _ex('Save settings', 'Button title', 'borlabs-cookie'); ?>">

        </fieldset>
    </form>
    <?php
    } else {
        echo \BorlabsCookie\Cookie\Backend\License::getInstance()->getNoLicenseMessage();
    }
    ?>
</div>
