first upload all files

Modules/Slider/Resources/assets/admin/js/Slide.js

@@ -0,0 +1,41 @@
+export default class {
+    constructor(data) {
+        this.slidePanelHtml = this.getSlidePanelHtml(data);
+    }
+
+    getSlidePanelHtml(data) {
+        data.slide.options = data.slide.options || this.getDefaultOptions();
+
+        let template = _.template($('#slide-template').html());
+
+        return $(template(data));
+    }
+
+    getDefaultOptions() {
+        return { caption_1: {}, caption_2: {}, direction: 'left', call_to_action: {} };
+    }
+
+    render() {
+        this.attachEventListeners();
+        this.showSelectedOptionBlock();
+
+        return this.slidePanelHtml;
+    }
+
+    attachEventListeners() {
+        this.slidePanelHtml.find('.delete-slide').on('click', () => {
+            this.slidePanelHtml.remove();
+        });
+
+        this.slidePanelHtml.find('.change-option-block').on('change', (e) => {
+            this.slidePanelHtml.find('.slide-options').hide();
+            this.slidePanelHtml.find(`.${e.currentTarget.value}`).show();
+        });
+    }
+
+    showSelectedOptionBlock() {
+        setTimeout(() => {
+            this.slidePanelHtml.find('.change-option-block').trigger('change');
+        });
+    }
+}

Modules/Slider/Resources/assets/admin/js/Slider.js

@@ -0,0 +1,58 @@
+import Slide from './Slide';
+
+export default class {
+    constructor() {
+        this.slideCount = 0;
+
+        this.addSlides(FleetCart.data['slider.slides']);
+
+        if (this.slideCount === 0) {
+            this.addSlide();
+        }
+
+        this.attachEventListeners();
+        this.makeSlidesSortable();
+    }
+
+    addSlides(slides) {
+        for (let attributes of slides) {
+            this.addSlide(attributes);
+        }
+    }
+
+    addSlide(attributes = {}) {
+        let slide = new Slide({ slideNumber: this.slideCount++, slide: attributes });
+
+        $('#slides-wrapper').append(slide.render());
+    }
+
+    attachEventListeners() {
+        $('.add-slide').on('click', () => {
+            this.addSlide();
+        });
+
+        this.attachImagePickerEventListener();
+    }
+
+    attachImagePickerEventListener() {
+        $('#slides-wrapper').on('click', '.slide-image', (e) => {
+            let picker = new MediaPicker({ type: 'image' });
+
+            picker.on('select', (file) => {
+                let html = `
+                    <img src="${file.path}">
+                    <input type="hidden" name="slides[${e.currentTarget.dataset.slideNumber}][file_id]" value="${file.id}">
+                `;
+
+                $(e.currentTarget).html(html);
+            });
+        });
+    }
+
+    makeSlidesSortable() {
+        Sortable.create(document.getElementById('slides-wrapper'), {
+            handle: '.slide-drag',
+            animation: 150,
+        });
+    }
+}

Modules/Slider/Resources/assets/admin/js/main.js

@@ -0,0 +1,9 @@
+import Slider from './Slider';
+
+new Slider();
+
+$('#autoplay').on('change', (e) => {
+    $('.autoplay-speed-field').toggleClass('hide');
+});
+
+window.admin.removeSubmitButtonOffsetOn('#slides');

Modules/Slider/Resources/assets/admin/sass/main.scss

@@ -0,0 +1,147 @@
+.slide {
+    border: 1px solid #e9e9e9;
+    border-radius: 3px;
+    margin-bottom: 15px;
+
+    .slide-header {
+        padding: 15px;
+        background: #f6f6f7;
+        border-bottom: 1px solid #e9e9e9;
+
+        .slide-drag {
+            font-size: 16px;
+            color: #737881;
+            cursor: move;
+            margin: 3px 10px 0 0;
+            white-space: nowrap;
+            display: inline-block;
+
+            i {
+                float: left;
+
+                &:nth-child(2) {
+                    margin-left: 1px;
+                }
+            }
+        }
+
+        span {
+            font-size: 16px;
+        }
+
+        .btn {
+            padding: 0;
+            background: transparent;
+        }
+    }
+
+    .slide-body {
+        position: relative;
+        padding: 15px;
+
+        .slide-tabs {
+            margin-left: 170px;
+
+            .nav-tabs {
+                display: inline-block;
+                margin: 0;
+                border: none;
+
+                a[data-toggle=tab] {
+                    outline: none;
+                }
+            }
+
+            .tab-content {
+                border-top: 1px solid #d2d6de;
+                margin-top: -7px;
+                -webkit-margin-before: -6px;
+                padding-top: 15px;
+            }
+
+            .checkbox {
+                margin-top: 30px;
+            }
+        }
+    }
+
+    .slide-image {
+        position: absolute;
+        top: 30px;
+        left: 15px;
+        border: 1px solid #d2d6de;
+        border-radius: 3px;
+        height: 150px;
+        width: 150px;
+        cursor: pointer;
+        z-index: 0;
+
+        > img {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            max-height: 100%;
+            max-width: 100%;
+            z-index: 1;
+            transform: translate(-50%, -50%);
+        }
+
+        > i {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            font-size: 70px;
+            color: #d9d9d9;
+            transform: translate(-50%, -50%);
+            z-index: -1;
+        }
+    }
+
+    .slide-options {
+        display: none;
+
+        .form-horizontal {
+            border-top: 1px solid #d2d6de;
+            padding-top: 15px;
+        }
+
+        h4 {
+            margin: 6px 0 20px;
+        }
+    }
+
+    .form-group {
+        margin-left: 0;
+        margin-right: 0;
+    }
+}
+
+@media screen and (max-width: 767px) {
+    .slide {
+        .slide-image {
+            position: relative;
+            left: auto;
+            top: auto;
+            margin: 15px auto 30px;
+            display: table;
+        }
+
+        .slide-body .slide-tabs {
+            margin: 0;
+            clear: both;
+        }
+
+        .slide-options .form-horizontal {
+            clear: both;
+            margin-top: 15px;
+        }
+    }
+}
+
+@media screen and (max-width: 1199px) {
+    .slide {
+        .slide-body .slide-tabs .checkbox {
+            margin-top: 0;
+        }
+    }
+}

Modules/Slider/Resources/lang/en/attributes.php

@@ -0,0 +1,23 @@
+<?php
+
+return [
+    'caption_1' => 'Caption 1',
+    'caption_2' => 'Caption 2',
+    'direction' => 'Direction',
+    'call_to_action_text' => 'Call to Action Text',
+    'call_to_action_url' => 'Call to Action URL',
+    'open_in_new_window' => 'Open in new window',
+    'caption_1_delay' => 'Delay',
+    'caption_1_effect' => 'Effect',
+    'caption_2_delay' => 'Delay',
+    'caption_2_effect' => 'Effect',
+    'call_to_action_delay' => 'Delay',
+    'call_to_action_effect' => 'Effect',
+    'name' => 'Name',
+    'speed' => 'Speed',
+    'autoplay' => 'Autoplay',
+    'autoplay_speed' => 'Autoplay Speed',
+    'fade' => 'Fade',
+    'dots' => 'Dots',
+    'arrows' => 'Arrows',
+];

Modules/Slider/Resources/lang/en/permissions.php

@@ -0,0 +1,8 @@
+<?php
+
+return [
+    'index' => 'Index Slider',
+    'create' => 'Create Slider',
+    'edit' => 'Edit Slider',
+    'destroy' => 'Delete Slider',
+];

Modules/Slider/Resources/lang/en/sliders.php

@@ -0,0 +1,58 @@
+<?php
+
+return [
+    'slider' => 'Slider',
+    'sliders' => 'Sliders',
+    'table' => [
+        'name' => 'Name',
+    ],
+    'tabs' => [
+        'group' => [
+            'slider_information' => 'Slider Information',
+        ],
+        'slides' => 'Slides',
+        'settings' => 'Settings',
+    ],
+    'slide' => [
+        'add_slide' => 'Add Slide',
+        'image_slide' => 'Image Slide',
+        'form' => [
+            'tabs' => [
+                'general' => 'General',
+                'options' => 'Options',
+            ],
+            'directions' => [
+                'left' => 'Left',
+                'right' => 'Right',
+            ],
+            'caption_1' => 'Caption 1',
+            'caption_2' => 'Caption 2',
+            'call_to_action' => 'Call to Action',
+            'call_to_action_url' => 'Call to Action URL',
+            'open_in_new_window' => 'Open in new window',
+            '0s' => '0s',
+            '0_3s' => '0.3s',
+            '0_7s' => '0.7s',
+        ],
+    ],
+    'effects' => [
+        'fadeInUp' => 'fadeInUp',
+        'fadeInDown' => 'fadeInDown',
+        'fadeInLeft' => 'fadeInLeft',
+        'fadeInRight' => 'fadeInRight',
+        'lightSpeedIn' => 'lightSpeedIn',
+        'slideInUp' => 'slideInUp',
+        'slideInDown' => 'slideInDown',
+        'slideInLeft' => 'slideInLeft',
+        'slideInRight' => 'slideInRight',
+        'zoomIn' => 'zoomIn',
+    ],
+    'form' => [
+        'enable_autoplay' => 'Enable autoplay',
+        '300ms' => '300ms',
+        '3000ms' => '3000ms',
+        'use_fade_instead_of_slide' => 'Fade slides instead of sliding',
+        'show_dots' => 'Show slider dots',
+        'show_arrows' => 'Show Prev/Next arrows',
+    ],
+];

Modules/Slider/Resources/views/admin/sliders/create.blade.php

@@ -0,0 +1,18 @@
+@extends('admin::layout')
+
+@component('admin::components.page.header')
+    @slot('title', trans('admin::resource.create', ['resource' => trans('slider::sliders.slider')]))
+
+    <li><a href="{{ route('admin.sliders.index') }}">{{ trans('slider::sliders.sliders') }}</a></li>
+    <li class="active">{{ trans('admin::resource.create', ['resource' => trans('slider::sliders.slider')]) }}</li>
+@endcomponent
+
+@section('content')
+    <form method="POST" action="{{ route('admin.sliders.store') }}" class="form-horizontal" id="slider-create-form" novalidate>
+        {{ csrf_field() }}
+
+        {!! $tabs->render(compact('slider')) !!}
+    </form>
+@endsection
+
+@include('slider::admin.sliders.partials.shortcuts')

Modules/Slider/Resources/views/admin/sliders/edit.blade.php

@@ -0,0 +1,20 @@
+@extends('admin::layout')
+
+@component('admin::components.page.header')
+    @slot('title', trans('admin::resource.edit', ['resource' => trans('slider::sliders.slider')]))
+    @slot('subtitle', $slider->name)
+
+    <li><a href="{{ route('admin.sliders.index') }}">{{ trans('slider::sliders.sliders') }}</a></li>
+    <li class="active">{{ trans('admin::resource.edit', ['resource' => trans('slider::sliders.slider')]) }}</li>
+@endcomponent
+
+@section('content')
+    <form method="POST" action="{{ route('admin.sliders.update', $slider) }}" class="form-horizontal" id="slider-edit-form" novalidate>
+        {{ csrf_field() }}
+        {{ method_field('put') }}
+
+        {!! $tabs->render(compact('slider')) !!}
+    </form>
+@endsection
+
+@include('slider::admin.sliders.partials.shortcuts')

Modules/Slider/Resources/views/admin/sliders/index.blade.php

@@ -0,0 +1,36 @@
+@extends('admin::layout')
+
+@component('admin::components.page.header')
+    @slot('title', trans('slider::sliders.sliders'))
+
+    <li class="active">{{ trans('slider::sliders.sliders') }}</li>
+@endcomponent
+
+@component('admin::components.page.index_table')
+    @slot('buttons', ['create'])
+    @slot('resource', 'sliders')
+    @slot('name', trans('slider::sliders.slider'))
+
+    @component('admin::components.table')
+        @slot('thead')
+            <tr>
+                @include('admin::partials.table.select_all')
+
+                <th>{{ trans('slider::sliders.table.name') }}</th>
+                <th data-sort>{{ trans('admin::admin.table.created') }}</th>
+            </tr>
+        @endslot
+    @endcomponent
+@endcomponent
+
+@push('scripts')
+    <script>
+        new DataTable('#sliders-table .table', {
+            columns: [
+                { data: 'checkbox', orderable: false, searchable: false, width: '3%' },
+                { data: 'name', name: 'translations.name', orderable: false, defaultContent: '' },
+                { data: 'created', name: 'created_at' },
+            ],
+        });
+    </script>
+@endpush

Modules/Slider/Resources/views/admin/sliders/partials/shortcuts.blade.php

@@ -0,0 +1,14 @@
+@push('shortcuts')
+    <dl class="dl-horizontal">
+        <dt><code>b</code></dt>
+        <dd>{{ trans('admin::admin.shortcuts.back_to_index', ['name' => trans('slider::sliders.slider')]) }}</dd>
+    </dl>
+@endpush
+
+@push('scripts')
+    <script>
+        keypressAction([
+            { key: 'b', route: "{{ route('admin.sliders.index') }}" }
+        ]);
+    </script>
+@endpush

Modules/Slider/Resources/views/admin/sliders/partials/submit.blade.php

@@ -0,0 +1,7 @@
+<div class="form-group">
+    <div class="col-md-10">
+        <button type="submit" class="btn btn-primary" data-loading>
+            {{ trans('admin::admin.buttons.save') }}
+        </button>
+    </div>
+</div>

Modules/Slider/Resources/views/admin/sliders/tabs/settings.blade.php

@@ -0,0 +1,15 @@
+<div class="row">
+    <div class="col-md-8">
+        {{ Form::text('name', trans('slider::attributes.name'), $errors, $slider, ['required' => true]) }}
+        {{ Form::number('speed', trans('slider::attributes.speed'), $errors, $slider, ['placeholder' => trans('slider::sliders.form.300ms')]) }}
+        {{ Form::checkbox('fade', trans('slider::attributes.fade'), trans('slider::sliders.form.use_fade_instead_of_slide'), $errors, $slider) }}
+        {{ Form::checkbox('autoplay', trans('slider::attributes.autoplay'), trans('slider::sliders.form.enable_autoplay'), $errors, $slider, ['checked' => true]) }}
+
+        <div class="autoplay-speed-field {{ ($slider->autoplay ?? true) ? '' : 'hide' }}">
+            {{ Form::number('autoplay_speed', trans('slider::attributes.autoplay_speed'), $errors, $slider, ['placeholder' => trans('slider::sliders.form.3000ms'), 'checked' => true]) }}
+        </div>
+
+        {{ Form::checkbox('dots', trans('slider::attributes.dots'), trans('slider::sliders.form.show_dots'), $errors, $slider, ['checked' => true]) }}
+        {{ Form::checkbox('arrows', trans('slider::attributes.arrows'), trans('slider::sliders.form.show_arrows'), $errors, $slider, ['checked' => true]) }}
+    </div>
+</div>

Modules/Slider/Resources/views/admin/sliders/tabs/slides.blade.php

@@ -0,0 +1,17 @@
+<div id="slides-wrapper" class="clearfix">
+    {{-- Slides will be added here dynamically using JS --}}
+</div>
+
+<div class="form-group">
+    <button type="button" class="add-slide btn btn-default m-l-15">
+        {{ trans('slider::sliders.slide.add_slide') }}
+    </button>
+</div>
+
+@include('slider::admin.sliders.templates.slide')
+
+@push('globals')
+    <script>
+        FleetCart.data['slider.slides'] = {!! old_json('slides', $slider->slides) !!};
+    </script>
+@endpush

Modules/Slider/Resources/views/admin/sliders/templates/partials/slide_call_to_action.blade.php

@@ -0,0 +1,43 @@
+<div class="slide-options call-to-action">
+    <h4>{{ trans("slider::sliders.slide.form.call_to_action") }}</h4>
+
+    <div class="form-group">
+        <div class="col-md-12 p-l-0">
+            <label class="control-label col-lg-2 col-md-3 col-sm-3 col-xs-12 text-left p-l-0" for="call-to-action-delay">
+                {{ trans("slider::attributes.call_to_action_delay") }}
+            </label>
+
+            <div class="col-lg-4 col-md-7 col-sm-6 col-xs-7 p-l-0">
+                <input type="number"
+                    name="slides[<%- slideNumber %>][options][call_to_action][delay]"
+                    class="form-control"
+                    id="call-to-action-delay"
+                    placeholder="{{ trans('slider::sliders.slide.form.0_7s') }}"
+                    value="<%- slide.options.call_to_action.delay %>"
+                    step="0.01"
+                >
+            </div>
+        </div>
+    </div>
+
+    <div class="form-group">
+        <div class="col-md-12 p-l-0">
+            <label class="control-label col-lg-2 col-md-3 col-sm-3 col-xs-12 text-left p-l-0" for="call-to-action-effect">
+                {{ trans("slider::attributes.call_to_action_effect") }}
+            </label>
+
+            <div class="col-lg-4 col-md-7 col-sm-6 col-xs-7 p-l-0">
+                <select name="slides[<%- slideNumber %>][options][call_to_action][effect]"
+                    class="form-control custom-select-black"
+                    id="call-to-action-effect"
+                >
+                    @foreach (trans('slider::sliders.effects') as $effect => $name)
+                        <option value="{{ $effect }}" <%= slide.options.call_to_action.effect === '{{ $effect }}' ? 'selected' : '' %>>
+                            {{ $name }}
+                        </option>
+                    @endforeach
+                </select>
+            </div>
+        </div>
+    </div>
+</div>

Modules/Slider/Resources/views/admin/sliders/templates/partials/slide_caption.blade.php

@@ -0,0 +1,43 @@
+<div class="slide-options caption-{{ $captionNumber }}">
+    <h4>{{ trans("slider::sliders.slide.form.caption_{$captionNumber}") }}</h4>
+
+    <div class="form-group">
+        <div class="col-md-12 p-l-0">
+            <label class="control-label col-lg-2 col-md-3 col-sm-3 col-xs-12 text-left p-l-0" for="slides-<%- slideNumber %>-caption-{{ $captionNumber }}-delay">
+                {{ trans("slider::attributes.caption_{$captionNumber}_delay") }}
+            </label>
+
+            <div class="col-lg-4 col-md-7 col-sm-6 col-xs-7 p-l-0">
+                <input type="number"
+                    name="slides[<%- slideNumber %>][options][caption_{{ $captionNumber }}][delay]"
+                    class="form-control"
+                    id="slides-<%- slideNumber %>-caption-{{ $captionNumber }}-delay"
+                    placeholder="{{ trans('slider::sliders.slide.form.' . ($captionNumber === 1 ? '0s' : '0_3s')) }}"
+                    value="<%- slide.options.caption_{{ $captionNumber }}.delay %>"
+                    step="0.01"
+                >
+            </div>
+        </div>
+    </div>
+
+    <div class="form-group">
+        <div class="col-md-12 p-l-0">
+            <label class="control-label col-lg-2 col-md-3 col-sm-3 col-xs-12 text-left p-l-0" for="slides-<%- slideNumber %>-caption-{{ $captionNumber }}-effect">
+                {{ trans("slider::attributes.caption_{$captionNumber}_effect") }}
+            </label>
+
+            <div class="col-lg-4 col-md-7 col-sm-6 col-xs-7 p-l-0">
+                <select name="slides[<%- slideNumber %>][options][caption_{{ $captionNumber }}][effect]"
+                    class="form-control custom-select-black"
+                    id="slides-<%- slideNumber %>-caption-{{ $captionNumber }}-effect"
+                >
+                    @foreach (trans('slider::sliders.effects') as $effect => $name)
+                        <option value="{{ $effect }}" <%= slide.options.caption_{{ $captionNumber }}.effect === '{{ $effect }}' ? 'selected' : '' %>>
+                            {{ $name }}
+                        </option>
+                    @endforeach
+                </select>
+            </div>
+        </div>
+    </div>
+</div>

Modules/Slider/Resources/views/admin/sliders/templates/slide.blade.php

@@ -0,0 +1,166 @@
+<script type="text/html" id="slide-template">
+    <div class="slide">
+        <div class="slide-header clearfix">
+            <span class="slide-drag pull-left">
+                <i class="fa">&#xf142;</i>
+                <i class="fa">&#xf142;</i>
+            </span>
+
+            <span class="pull-left">
+                {{ trans('slider::sliders.slide.image_slide') }}
+            </span>
+
+            <button type="button" class="delete-slide btn pull-right">
+                <i class="fa fa-times"></i>
+            </button>
+        </div>
+
+        <div class="slide-body">
+            <input type="hidden" name="slides[<%- slideNumber %>][id]" value="<%- slide.id %>">
+
+            <div class="slide-image" data-slide-number="<%- slideNumber %>">
+                <% if (slide.file && slide.file.path) { %>
+                    <img src="<%- slide.file.path %>" alt="slide-image">
+                    <input type="hidden" name="slides[<%- slideNumber %>][file_id]" value="<%- slide.file.id %>">
+                <% } else { %>
+                    <i class="fa fa-picture-o"></i>
+                <% } %>
+            </div>
+
+            <div class="slide-tabs tab-wrapper">
+                <ul class="nav nav-tabs">
+                    <li class="active">
+                        <a href="#slides-<%- slideNumber %>-general" data-toggle="tab">
+                            {{ trans('slider::sliders.slide.form.tabs.general') }}
+                        </a>
+                    </li>
+                    <li>
+                        <a href="#slider-<%- slideNumber %>-options" data-toggle="tab">
+                            {{ trans('slider::sliders.slide.form.tabs.options') }}
+                        </a>
+                    </li>
+                </ul>
+
+                <div class="tab-content">
+                    <div id="slides-<%- slideNumber %>-general" class="general tab-pane fade in active">
+                        <div class="row">
+                            <div class="col-lg-4 col-md-6">
+                                <div class="form-group">
+                                    <label for="slides-<%- slideNumber %>-caption-1">
+                                        {{ trans('slider::attributes.caption_1') }}
+                                    </label>
+
+                                    <input type="text"
+                                        name="slides[<%- slideNumber %>][caption_1]"
+                                        class="form-control"
+                                        id="slides-<%- slideNumber %>-caption-1"
+                                        value="<%- slide.caption_1 %>"
+                                    >
+                                </div>
+                            </div>
+
+                            <div class="col-lg-4 col-md-6">
+                                <div class="form-group">
+                                    <label for="slides-<%- slideNumber %>-caption-2">
+                                        {{ trans('slider::attributes.caption_2') }}
+                                    </label>
+
+                                    <input type="text"
+                                        name="slides[<%- slideNumber %>][caption_2]"
+                                        class="form-control"
+                                        id="slides-<%- slideNumber %>-caption-2"
+                                        value="<%- slide.caption_2 %>"
+                                    >
+                                </div>
+                            </div>
+
+                            <div class="col-lg-4 col-md-6">
+                                <div class="form-group">
+                                    <label for="slides-<%- slideNumber %>-direction">
+                                        {{ trans('slider::attributes.direction') }}
+                                    </label>
+
+                                    <select
+                                        name="slides[<%- slideNumber %>][direction]"
+                                        class="form-control"
+                                        id="slides-<%- slideNumber %>-direction"
+                                        value="<%- slide.direction %>"
+                                    >
+                                        <option value="left" <%= slide.direction === 'left' ? 'selected' : '' %>>
+                                            {{ trans('slider::sliders.slide.form.directions.left') }}
+                                        </option>
+
+                                        <option value="right" <%= slide.direction === 'right' ? 'selected' : '' %>>
+                                            {{ trans('slider::sliders.slide.form.directions.right') }}
+                                        </option>
+                                    </select>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="row">
+                            <div class="col-lg-4 col-md-6">
+                                <div class="form-group">
+                                    <label for="slides[<%- slideNumber %>][call-to-action-text]">
+                                        {{ trans('slider::attributes.call_to_action_text') }}
+                                    </label>
+
+                                    <input type="text"
+                                        name="slides[<%- slideNumber %>][call_to_action_text]"
+                                        class="form-control"
+                                        id="slides[<%- slideNumber %>][call-to-action-text]"
+                                        value="<%- slide.call_to_action_text %>"
+                                    >
+                                </div>
+                            </div>
+
+                            <div class="col-lg-4 col-md-6">
+                                <div class="form-group">
+                                    <label for="slides-<%- slideNumber %>-call-to-action-url">
+                                        {{ trans('slider::attributes.call_to_action_url') }}
+                                    </label>
+
+                                    <input type="text"
+                                        name="slides[<%- slideNumber %>][call_to_action_url]"
+                                        class="form-control"
+                                        id="slides-<%- slideNumber %>-call-to-action-url"
+                                        value="<%- slide.call_to_action_url %>"
+                                    >
+                                </div>
+                            </div>
+
+                            <div class="col-lg-4 col-md-12">
+                                <div class="checkbox">
+                                    <input type="hidden" name="slides[<%- slideNumber %>][open_in_new_window]" value="0">
+
+                                    <input type="checkbox"
+                                        name="slides[<%- slideNumber %>][open_in_new_window]"
+                                        value="1"
+                                        id="slides-<%- slideNumber %>-open-in-new-window"
+                                        <%= slide.open_in_new_window ? 'checked' : '' %>
+                                    >
+
+                                    <label for="slides-<%- slideNumber %>-open-in-new-window">
+                                        {{ trans('slider::attributes.open_in_new_window') }}
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div id="slider-<%- slideNumber %>-options" class="tab-pane fade in clearfix">
+                        <select class="change-option-block custom-select-black pull-right">
+                            <option value="caption-1" selected>{{ trans('slider::sliders.slide.form.caption_1') }}</option>
+                            <option value="caption-2">{{ trans('slider::sliders.slide.form.caption_2') }}</option>
+                            <option value="call-to-action">{{ trans('slider::sliders.slide.form.call_to_action') }}</option>
+                        </select>
+
+                        @include('slider::admin.sliders.templates.partials.slide_caption', ['captionNumber' => 1])
+                        @include('slider::admin.sliders.templates.partials.slide_caption', ['captionNumber' => 2])
+                        @include('slider::admin.sliders.templates.partials.slide_call_to_action')
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</script>