<?php
N2Localization::addJS(array(
    'Add animation',
    'Animation chain',
    'Animation',
    'Col',
    'Content',
    'Dark Mode',
    'Delete layer',
    'Design',
    'Duplicate layer',
    'Edit',
    'Go to slide ID',
    'Go to slide',
    'Group',
    'Layer',
    'Load design',
    'Lock Guides',
    'More',
    'NOTE: Layer design changes apply to each device. Watch <a href="%s" target="_blank">video tutorial</a> to learn responsive tools.',
    'Next slide',
    'Overwrite preset',
    'Pick the align point of the child layer!',
    'Pick the align point of the parent layer!',
    'Pick the child layer!',
    'Pick the parent layer!',
    'Preset',
    'Previous slide',
    'Reset design to default',
    'Row',
    'Ruler',
    'Save as new',
    'Save design as new preset',
    'Scroll to',
    'Settings',
    'Show Guides',
    'Slide event',
    'Smart Snap',
    'There is no layer available to be child of the selected layer!',
    'Round to 5px',
    'Clear Guides',
    'External url',
    'Insert',
    'Choose images',
    'Titles',
    'Search',
    'Icons',
    'Image field can not be empty!',
    'The image is empty',
));

$externals = N2SmartSliderSettings::get('external-css-files');
if (!empty($externals)) {
    $externals = explode("\n", $externals);
    foreach ($externals AS $external) {
        echo "<link rel='stylesheet' href='" . $external . "' type='text/css' media='all' />";
    }
}
/**
 * @var $slidesModel N2SmartsliderSlidesModel
 */
$slide = $slidesModel->get(N2Request::getInt('slideid', 0));


/** @var N2SmartSliderManager $sliderManager */
/** @var N2SmartSlider $slider */
$slider = $sliderManager->getSlider();

$renderable = $slider;
include(dirname(__FILE__) . '/_layer-window.php');

$renderedSlider = $sliderManager->render();

include(dirname(__FILE__) . '/_main-top-bar.php');


$renderedSlide = null;
if ($slide) {
    $params = new N2Data($slide['params'], true);
    if ($params->get('static-slide', 0)) {
        foreach ($slider->staticSlides AS $s) {
            if ($s->id == $slide['id']) {
                $renderedSlide = $s;
                break;
            }
        }
    }
    if ($renderedSlide == null) {
        foreach ($slider->slides AS $s) {
            if ($s->id == $slide['id']) {
                $renderedSlide = $s;
                break;
            }
        }
    }
} else {
    $renderedSlide = new N2SmartSliderSlide($slider, array('params' => ''));
}

ob_start();
?>

    <div id="n2-ss-slide-edit-slides" class="n2-ss-slides-outer-container">
        <div class="n2-heading-bar ">
            <div class="n2-h1 n2-heading">Slides</div>
        </div>
        <?php
        N2SSBackendFragments::slideManager($slider);
        ?>
        <div class="n2-clear"></div>
    </div>
<?php
$slidesOuterHTML = ob_get_clean();

$thumbnail = $renderedSlide->getThumbnail();
if (empty($thumbnail)) {
    $thumbnail = N2ImageHelper::fixed('$system$/images/placeholder/image.png');
}
$title = $renderedSlide->getTitle();
if (empty($thumbnail)) {
    $thumbnail = N2ImageHelper::fixed('$system$/images/placeholder/image.png');
}
?>

<?php echo $slidesOuterHTML; ?>

    <div class="n2-ss-edit-slide-top">
    <div class="n2-ss-edit-slide-top-thumbnail" onclick="N2Classes.$('.n2-ss-tab-background').trigger('click');"><img src="<?php echo n2_esc_attr($thumbnail); ?>"/></div>
    <div class="n2-ss-edit-slide-top-details">
        <div class="n2-h1" onclick="N2Classes.$('.n2-ss-tab-settings').trigger('click');N2Classes.$('#slidetitle').trigger('focus');N2Classes.$(window).scrollTop(N2Classes.$('#slidetitle').offset().top - 200);">
            <?php
            echo n2_esc_html($renderedSlide->getTitle(true));
            ?>
        </div>
        <div class="n2-h4"><a class="n2-ss-back-to" href="<?php echo $this->appType->router->createUrl(array(
                "slider/edit",
                array('sliderid' => $sliderId)
            )) ?>"><?php n2_e('Back to slider'); ?></a></div>
        <div id="n2-form-matrix-slide-settings-external-tab" class="n2-ss-edit-slide-top-tabs">
            <?php
            $tab = 0;
            if (!$slider->isStaticEdited) {
                echo N2Html::tag('a', array(
                    'href'     => '#',
                    'data-tab' => $tab++,
                    'class'    => 'n2-ss-tab-background n2-button n2-button-l n2-radius-s n2-button-with-icon n2-h4' . ($tab == 1 ? ' n2-first' : '')
                ), n2_('Background'));
            }

            if (!$slider->isStaticEdited) {
                switch ($slider->data->get('type')) {
                    case 'simple':
                    case 'block':
                        echo N2Html::tag('a', array(
                            'href'     => '#',
                            'data-tab' => $tab++,
                            'class'    => 'n2-ss-tab-animation n2-button n2-button-l n2-radius-s n2-button-with-icon n2-h4' . ($tab == 1 ? ' n2-first' : '')
                        ), n2_('Animation'));
                        break;
                }
            }

            if ($slide['generator_id'] > 0) {
                echo N2Html::tag('a', array(
                    'href'     => '#',
                    'data-tab' => $tab++,
                    'class'    => 'n2-ss-tab-settings n2-button n2-button-l n2-radius-s n2-button-with-icon n2-h4' . ($tab == 1 ? ' n2-first' : '')
                ), n2_('Settings'));
                echo N2Html::tag('a', array(
                    'href'     => '#',
                    'data-tab' => $tab++,
                    'class'    => 'n2-ss-tab-generator n2-button n2-button-l n2-radius-s n2-button-with-icon n2-h4 n2-last' . ($tab == 1 ? ' n2-first' : '')
                ), n2_('Generator'));
            } else {
                echo N2Html::tag('a', array(
                    'href'     => '#',
                    'data-tab' => $tab++,
                    'class'    => 'n2-ss-tab-settings n2-button n2-button-l n2-radius-s n2-button-with-icon n2-h4 n2-last' . ($tab == 1 ? ' n2-first' : '')
                ), n2_('Settings'));
            }
            ?>
        </div>
    </div>
    <div class="n2-heading-actions">
        <span class="n2-heading-actions-label n2-h4"></span>
        <?php
        if ($slide['id'] > 0) {
            $app          = N2Base::getApplication('smartslider');
            $accessEdit   = N2Acl::canDo('smartslider_edit', $app->info);
            $accessDelete = N2Acl::canDo('smartslider_delete', $app->info);
            if ($accessEdit) {
                echo N2Html::tag('a', array(
                    'data-label' => n2_('Duplicate slide'),
                    'href'       => $this->appType->router->createUrl(array(
                        'slides/duplicate',
                        array(
                            'sliderid' => $sliderId,
                            'slideid'  => $slide['id']
                        ) + N2Form::tokenizeUrl()
                    ))
                ), N2Html::tag('i', array('class' => 'n2-i n2-i-a-duplicate')));
            }

            if ($accessDelete) {
                echo N2Html::tag('a', array(
                    'data-label' => n2_('Delete slide'),
                    "onclick"    => "return N2Classes.NextendModal.deleteModalLink(this, 'slide-delete', " . json_encode($slide['title']) . ");",
                    'href'       => $this->appType->router->createUrl(array(
                        'slides/delete',
                        array(
                            'sliderid' => $sliderId,
                            'slideid'  => $slide['id']
                        ) + N2Form::tokenizeUrl()
                    ))
                ), N2Html::tag('i', array('class' => 'n2-i n2-i-a-delete')));
            }
        }
        ?>
        <script type="text/javascript">
            N2R('documentReady', function ($) {
                var label = $('.n2-heading-actions-label');
                $('.n2-heading-actions > a').on({
                    mouseenter: function () {
                        label.html($(this).data('label'));
                    },
                    mouseleave: function () {
                        label.html('');
                    }
                });
            });
        </script>
    </div>
</div>

<?php
if ($isAddSample):
    ?>
    <div class="n2-ss-sample-slides-container">
        <div class="n2-ss-sample-slide-settings">
            <div class="n2-ss-sample-slide-settings-col" style="margin-left:auto;">
                <div id="n2-ss-sample-slide-setting-background-image">
                    <i class="n2-i n2-i-close"></i>
                </div>
            </div>
            <div class="n2-ss-sample-slide-settings-col n2-ss-sample-slide-settings-image-specific">
                <div class="n2-ss-sample-slide-setting">
                    <div class="n2-ss-sample-slide-setting-label"><?php n2_e("Opacity"); ?></div>
                    <div class="n2-ss-sample-slide-setting-field">
                        <div id="n2-ss-sample-slide-setting-opacity-slider" class="nui-slider"></div>
                    </div>
                </div>
                <div class="n2-ss-sample-slide-setting">
                    <div class="n2-ss-sample-slide-setting-label"><?php n2_e("Blur"); ?></div>
                    <div class="n2-ss-sample-slide-setting-field">
                        <div id="n2-ss-sample-slide-setting-blur-slider" class="nui-slider"></div>
                    </div>
                </div>
            </div>
            <div class="n2-ss-sample-slide-settings-col">
                <div class="n2-ss-sample-slide-setting">
                    <div class="n2-ss-sample-slide-setting-label"><?php n2_e("Color"); ?></div>
                    <div class="n2-ss-sample-slide-setting-field">
                        <input id="n2-ss-sample-slide-setting-color" type="hidden"/>
                    </div>
                </div>
                <div class="n2-ss-sample-slide-setting n2-ss-sample-slide-setting-gradient-specific">
                    <div class="n2-ss-sample-slide-setting-label"><?php n2_e("Gradient"); ?></div>
                    <div class="n2-ss-sample-slide-setting-field">
                        <input id="n2-ss-sample-slide-setting-gradient" type="hidden"/>
                    </div>
                </div>
            </div>
            <div class="n2-ss-sample-slide-settings-col" style="margin-left: auto;flex-direction: row;align-items: center;">
                <?php
                echo N2Html::tag('a', array(
                    'href'    => $this->appType->router->createUrl(array(
                        "slider/edit",
                        array(
                            "sliderid" => $sliderId
                        )
                    )),
                    'style'   => 'margin:10px;',
                    'class'   => 'n2-button n2-button-normal n2-button-red n2-button-l n2-h4 n2-b n2-uc n2-radius-s',
                    'onclick' => 'return nextend.cancel(this.href);'
                ), n2_('Cancel'));

                echo N2Html::tag('a', array(
                    'href'    => '#',
                    'style'   => 'margin:10px;',
                    'class'   => 'n2-button n2-button-normal n2-button-green n2-button-l n2-h4 n2-b n2-uc n2-radius-s',
                    'onclick' => 'return N2Classes.Form.submit("#smartslider-form");'
                ), n2_('Save'));
                ?>
            </div>
        </div>

    </div>
<?php endif; ?>

    <form id="smartslider-form" action="#" method="post">
    <?php
    $slideData = $slidesModel->renderEditForm($slider, $slide);
    ?>
        <input name="save" value="1" type="hidden"/>
</form>

<?php
if (!$isAddSample && !N2Base::getApplication('smartslider')->storage->get('tutorial', 'hideContentMode')) {
    N2Html::banner(array(
        'id'          => 'n2-ss-tutorial-content-mode',
        'image'       => '$ss$/admin/images/contentmode.png',
        'imageLink'   => 'https://smartslider3.com/videos/contentmode',
        'title'       => n2_('Slide Editing - Getting Started'),
        'description' => n2_('Start building your first slide by watching the video and learn the basic steps of to the Slide editing. Smart Slider 3.2 introduces the new Content Builder mode which is a block-based system where you can add rows, columns and of course layers to the slide.'),
        'buttons'     => array(
            '<a href="https://smartslider3.com/videos/contentmode" class="n2-button n2-button-normal n2-button-green n2-button-l n2-h4 n2-b n2-uc n2-radius-s" target="_blank">' . n2_('Watch now') . '</a>',
            '<a onclick="N2Classes.AjaxHelper.ajax({url: N2Classes.AjaxHelper.makeAjaxUrl(\'' . $this->appType->router->createAjaxUrl(array('settings/hidecontentmode')) . '\')});N2Classes.$(\'#n2-ss-tutorial-content-mode\').remove(); return false;" href="#" class="n2-button n2-button-normal n2-button-grey n2-button-l n2-h4 n2-b n2-uc n2-radius-s" target="_blank">' . n2_('Close') . '</a>'
        )
    ));
}
?>

<?php
include dirname(__FILE__) . '/_canvas.php';
include dirname(__FILE__) . '/_layer-list.php';