.uag-blocks-common-selector{z-index:var(--z-index-desktop) !important}@media (max-width: 976px){.uag-blocks-common-selector{z-index:var(--z-index-tablet) !important}}@media (max-width: 767px){.uag-blocks-common-selector{z-index:var(--z-index-mobile) !important}}<?php


namespace Nextend\Framework\Image;


use Nextend\Framework\Form\Container\ContainerTable;
use Nextend\Framework\Form\ContainerInterface;
use Nextend\Framework\Form\Element\EmptyArea;
use Nextend\Framework\Form\Element\Text\FieldImage;
use Nextend\Framework\Form\Form;
use Nextend\Framework\Visual\ModelVisual;

class ModelImage extends ModelVisual {

    protected $type = 'image';

    /** @var ImageStorage */
    protected $storage;

    protected function init() {

        $this->storage = new ImageStorage();
    }


    public function renderForm() {
        $form      = new Form($this, 'n2-image-editor');
        $container = $form->getContainer();

        $desktopTable = new ContainerTable($container, 'desktop', n2_('Desktop'));

        $previewRow = $desktopTable->createRow('desktop-preview');

        new EmptyArea($previewRow, 'desktop-preview', n2_('Preview'));

        $this->renderDeviceTab($container, 'desktop-retina', n2_('Desktop retina'));
        $this->renderDeviceTab($container, 'tablet', n2_('Tablet'));
        $this->renderDeviceTab($container, 'mobile', n2_('Mobile'));

        $form->render();
    }

    /**
     * @param ContainerInterface $container
     */
    private function renderDeviceTab($container, $name, $label) {

        $table = new ContainerTable($container, $name, $label);

        $row1 = $table->createRow('desktop-row-1');

        new FieldImage($row1, $name . '-image', n2_('Image'));

        $previewRow = $table->createRow($name . '-preview');
        new EmptyArea($previewRow, $name . '-preview', n2_('Preview'));

    }

    public function addVisual($image, $visual) {

        $visualId = $this->storage->add($image, $visual);

        $visual = $this->storage->getById($visualId);
        if (!empty($visual)) {
            return $visual;
        }

        return false;
    }

    public function getVisual($image) {
        return $this->storage->getByImage($image);
    }

    public function deleteVisual($id) {
        $visual = $this->storage->getById($id);
        $this->storage->deleteById($id);

        return $visual;
    }

    public function changeVisual($id, $value) {
        if ($this->storage->setById($id, $value)) {
            return $this->storage->getById($id);
        }

        return false;
    }

    public function getVisuals($setId) {
        return $this->storage->getAll();
    }
}.uagb-block-b4c4a866.uagb-forms__outer-wrap{padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;}.uagb-block-b4c4a866 .uagb-forms-main-form textarea{text-align: left;}.uagb-block-b4c4a866 .uagb-forms-input{text-align: left;}.uagb-block-b4c4a866 .uagb-forms-input-label{display: none;text-align: left;}.uagb-block-b4c4a866 .uagb-forms-main-form .uagb-forms-field-set{margin-bottom: 20px;}.uagb-block-b4c4a866 .uagb-forms-main-form .uagb-forms-input-label{font-size: 15px;margin-bottom: 10px;}.uagb-block-b4c4a866 .uagb-forms-main-form .uagb-forms-input:focus{outline:  none !important;background-color:  !important;}.uagb-block-b4c4a866 .uagb-forms-main-form .uagb-forms-input:focus::placeholder{color:  !important;}.uagb-block-b4c4a866 .uagb-slider.round{border-radius: 20px !important;}.uagb-block-b4c4a866 .uagb-form-phone-country{background: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9JzE4cHgnIGhlaWdodD0nMThweCcgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIj48cGF0aCBkPSJtMzk2LjYgMTYwIDE5LjQgMjAuN0wyNTYgMzUyIDk2IDE4MC43bDE5LjMtMjAuN0wyNTYgMzEwLjV6IiBmaWxsPSIjMWQyMzI3IiBjbGFzcz0iZmlsbC0wMDAwMDAiPjwvcGF0aD48L3N2Zz4=) no-repeat;-moz-appearance: none !important;-webkit-appearance:  none !important;background-position:  top 50% right 10px;appearance: none !important;}.uagb-block-b4c4a866 .uagb-forms-main-form .uagb-forms-main-submit-button-wrap{text-align: left;}.uagb-block-b4c4a866 .uagb-forms-checkbox-wrap input[type=checkbox] + label:before{background-color: #ffffff;width: 15px;height: 15px;}.uagb-block-b4c4a866 .uagb-forms-radio-wrap input[type=radio] + label:before{background-color: #ffffff;width: 15px;height: 15px;}.uagb-block-b4c4a866 .uagb-slider{background-color: #ffffff;}.uagb-block-b4c4a866 .uagb-forms-main-form .uagb-switch{height: calc(1px + 1px + 26px);width: calc(1px + 1px + 56px);}.uagb-block-b4c4a866 .uagb-forms-main-form .uagb-slider:before{height: 20px;width: 20px;top: 3px;bottom: 3px;left: 3px;background-color: #1e1e1e;border-radius: 3px 3px 3px 3px;}.uagb-block-b4c4a866 .uagb-switch input:checked + .uagb-slider{background-color: #017cba;}.uagb-block-b4c4a866 .uagb-switch input:checked + .uagb-slider:before{transform: translateX(30px);background-color: #ffffff;}.uagb-block-b4c4a866 .uagb-switch input:focus + .uagb-slider{box-shadow: 0 0 1px#017cba;}.uagb-block-b4c4a866 .uagb-forms-accept-wrap input[type=checkbox] + label:before{background-color: #ffffff;width: 15px;height: 15px;}.uagb-block-b4c4a866 .uagb-forms-main-form  .uagb-forms-input{border-top: 0;border-left: 0;border-right: 0;outline: 0;border-radius: 0;background: transparent;border-bottom: 1px solid #BDBDBD;padding-top: 0px;padding-bottom: 10px;padding-left: 0px;padding-right: 10px;border-top-width: 1px;border-left-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-top-left-radius: 3px;border-top-right-radius: 3px;border-bottom-left-radius: 3px;border-bottom-right-radius: 3px;border-color: #BDBDBD;border-style: solid;}.uagb-block-b4c4a866 .uagb-forms-main-form  .uagb-forms-accept-wrap input[type=checkbox] + label:before{border-bottom: 1px solid #BDBDBD;}.uagb-block-b4c4a866 .uagb-forms-main-form  .uagb-forms-checkbox-wrap input[type=checkbox] + label:before{border-bottom: 1px solid #BDBDBD;}.uagb-block-b4c4a866 .uagb-forms-main-form .uagb-slider{border-bottom: 1px solid #BDBDBD;}.uagb-block-b4c4a866 .uagb-forms-main-form  .uagb-forms-radio-wrap input[type=radio] + label:before{border-bottom: 1px solid #BDBDBD;}.uagb-block-b4c4a866.uagb-forms__outer-wrap .uagb-forms-main-form  .uagb-forms-input{border-top-width: 0;border-right-width: 0;border-left-width: 0;border-bottom-width: 1px;}.uagb-block-b4c4a866 .uagb-forms-checkbox-wrap input[type=checkbox]:checked + label:before{color: #ffffff;background-color: #017cba;font-size: calc(15px / 1.2);}.uagb-block-b4c4a866 .uagb-forms-radio-wrap input[type=radio]:checked + label:before{background-color: #ffffff;box-shadow: inset 0 0 0 4px #017cba;font-size: calc(15px / 1.2);}.uagb-block-b4c4a866 .uagb-forms-accept-wrap input[type=checkbox]:checked + label:before{color: #ffffff;background-color: #017cba;font-size: calc(15px / 1.2);}@media only screen and (max-width: 976px) {.uagb-block-b4c4a866.uagb-forms__outer-wrap{padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;}.uagb-block-b4c4a866 .uagb-forms-main-form .uagb-forms-input-label{font-size: 15px;}.uagb-block-b4c4a866 .uagb-slider.round{border-radius: 20px !important;}.uagb-block-b4c4a866 .uagb-form-phone-country{background-position: top 50% right 12px;padding-right: 30px;}.uagb-block-b4c4a866 .uagb-switch input:checked + .uagb-slider:before{transform: translateX(30px);}.uagb-block-b4c4a866 .uagb-forms-checkbox-wrap input[type=checkbox]:checked + label:before{font-size: calc(15px / 1.2);}.uagb-block-b4c4a866 .uagb-forms-radio-wrap input[type=radio]:checked + label:before{font-size: calc(15px / 1.2);}.uagb-block-b4c4a866 .uagb-forms-accept-wrap input[type=checkbox]:checked + label:before{font-size: calc(15px / 1.2);}.uagb-block-b4c4a866 .uagb-forms-main-form .uagb-switch{height: calc(1px + 1px + 26px);width: calc(1px + 1px + 56px);}.uagb-block-b4c4a866 .uagb-forms-main-form .uagb-slider:before{height: calc(20px + 0px);width: calc(20px + 0px);top: 3px;bottom: 3px;left: 3px;border-radius: 3px 3px 3px 3px;}}@media only screen and (max-width: 767px) {.uagb-block-b4c4a866.uagb-forms__outer-wrap{padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;}.uagb-block-b4c4a866 .uagb-forms-main-form .uagb-forms-input-label{font-size: 15px;}.uagb-block-b4c4a866 .uagb-slider.round{border-radius: 20px !important;}.uagb-block-b4c4a866 .uagb-form-phone-country{background-position: top 50% right 6px;padding-right: 30px;}.uagb-block-b4c4a866 .uagb-switch input:checked + .uagb-slider:before{transform: translateX(30px);}.uagb-block-b4c4a866 .uagb-forms-checkbox-wrap input[type=checkbox]:checked + label:before{font-size: calc(15px / 1.2);}.uagb-block-b4c4a866 .uagb-forms-radio-wrap input[type=radio]:checked + label:before{font-size: calc(15px / 1.2);}.uagb-block-b4c4a866 .uagb-forms-accept-wrap input[type=checkbox]:checked + label:before{font-size: calc(15px / 1.2);}.uagb-block-b4c4a866 .uagb-forms-main-form .uagb-switch{height: calc(1px + 1px + 26px);width: calc(1px + 1px + 56px);}.uagb-block-b4c4a866 .uagb-forms-main-form .uagb-slider:before{height: calc(20px + 0px);width: calc(20px + 0px);top: 3px;bottom: 3px;left: 3px;border-radius: 3px 3px 3px 3px;}}