﻿@model cloudscribe. SimpleContent. ContentTemplates. ViewModels. SectionsWithImageViewModel
@using cloudscribe. SimpleContent. ContentTemplates
@using cloudscribe. SimpleContent. ContentTemplates. Configuration
@using Microsoft. AspNetCore. Antiforgery
@inject IStringLocalizer<ContentTemplateResources> sr
@inject IAntiforgery antiforgery
@inject ICkeditorOptionsResolver editorOptionsResolver
@inject IColumnTemplateOptionsProvider optionsProvider
@{

    var tokens = antiforgery. GetAndStoreTokens(Context);
    var ckOptions = await editorOptionsResolver. GetCkeditorOptions();
    var options = await optionsProvider. ResolveColumnTemplateOptions(Context. Request. Host. Host, Context. Request. Path);
}
@functions{
    public string GetImageUrl(string imageUrl)
    {
        if (! string. IsNullOrWhiteSpace(imageUrl)) { return imageUrl; }
        return "/cr/images/690x517-placeholder.png";
    }
}
<p>@sr["Sections with no content body will not be shown even if they have images. "]</p>
<partial name="TwoSectionsWithImageEditLayoutSelector" model="Model" />
<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
        <a id="cedit-tab1" class="nav-link active" href="#tabCol1" data-toggle="tab" role="tab" aria-controls="tabCol1" aria-selected="true">@sr["Section 1"]</a>
    </li>
    <li class="nav-item">
        <a id="cedit-tab2" class="nav-link" href="#tabCol2" data-toggle="tab" role="tab" aria-controls="tabCol2" aria-selected="false">@sr["Section 2"]</a>
    </li>
</ul>
<div id="myTabContent" class="tab-content">
    <div class="tab-pane active" id="tabCol1" role="tabpanel" aria-labelledby="cedit-tab1">
        <div class="d-flex align-items-stretch">
            <div class="cs-crop-container">
                <img id="dz1Image" style="max-width:690px;" src="@GetImageUrl(Model. SectionOneResizedUrl)" />
            </div>
            <div class="d-flex flex-column">
                <div id="dz1" class="cloudscribe-dropzone-standalone" style="cursor:pointer;"
                     data-dropzone=""
                     data-upload-url="@Url. Action("DropFile", "FileManager")"
                     data-anti-forgery-token="@tokens. RequestToken"
                     data-file-browse-url="@ckOptions. ImageBrowseUrl"
                     data-file-crop-url="@ckOptions. CropFileUrl"
                     data-target-path="@options. NewImagePath"
                     data-create-thumb="@options. CreateThumbnails. ToString().ToLower()"
                     data-resize-image="true"
                     data-keep-original="@options. KeepOriginalSizeImages. ToString().ToLower()"
                     data-enable-browse-server="@options. EnableBrowseServer. ToString().ToLower()"
                     data-enable-crop="@options. EnableCropping. ToString().ToLower()"
                     data-accepted-files="image/*"
                     data-target-fullsize-input-id="SectionOneFullSizeUrl"
                     data-target-resized-input-id="SectionOneResizedUrl"
                     data-target-thumb-input-id=""
                     data-target-fullsize-image-id="dz1Image"
                     data-target-resized-image-id=""
                     data-target-thumb-image-id=""
                     data-fullsize-placeholder-image="@options. PlaceholderImageUrl"
                     data-resized-placeholder-image=""
                     data-thumb-placeholder-image=""
                     data-resize-width="@options. ResizeMaxWidth"
                     data-resize-height="@options. ResizeMaxHeight"
                     data-crop-area-width="@options. CropAreaWidth"
                     data-crop-area-height="@options. CropAreaHeight">
                    @sr["Drop file here or click to browse device for file."] 
                </div>
                <div class="pl-1 pt-1">
                    <div class="d-flex flex-column">
                        <button id="dz1-browse-server" type="button" class="mb-1 btn btn-primary collapse">@sr["Browse Server"] <i class="fas fa-search" aria-hidden="true"></i></button>
                        <button id="dz1-save-crop" type="button" class="mb-1 btn btn-primary collapse">@sr["Save Crop"] <i class="far fa-save" aria-hidden="true"></i></button>
                    </div>
                </div>
            </div>
        </div>
        <input asp-for="SectionOneFullSizeUrl" type="hidden" />
        <input asp-for="SectionOneResizedUrl" type="hidden" />
        <div class="form-group">
            <label asp-for="SectionOneAltText">@sr["Image Description"]</label>
            <input asp-for="SectionOneAltText" class="form-control" />
        </div>
        <div class="form-group">
            <label asp-for="SectionOneHeading">@sr["Section Heading - optional"]</label>
            <input asp-for="SectionOneHeading" class="form-control" />
        </div>
        <label asp-for="SectionOneContent">@sr["Section 1 Content"]</label>
        <textarea asp-for="SectionOneContent" class="form-control"
                  data-ckeditor-unobtrusive=""
                  data-ckeditor-config-url="@ckOptions. CustomConfigPath"
                  data-ckeditor-config-language="@ckOptions. LanguageCode"
                  data-ckeditor-config-dropfileuploadurl="@ckOptions. DropFileUrl"
                  data-ckeditor-config-filebrowserurl="@ckOptions. FileBrowseUrl"
                  data-ckeditor-config-imagebrowseurl="@ckOptions. ImageBrowseUrl"></textarea>

    </div>
    <div class="tab-pane" id="tabCol2" role="tabpanel" aria-labelledby="cedit-tab2">
        <div class="d-flex align-items-stretch">
            <div class="cs-crop-container">
                <img id="dz2Image" style="max-width:690px;" src="@GetImageUrl(Model. SectionTwoResizedUrl)" />
            </div>
            <div class="d-flex flex-column">
                <div id="dz2" class="cloudscribe-dropzone-standalone" style="cursor:pointer;"
                     data-dropzone=""
                     data-upload-url="@Url. Action("DropFile", "FileManager")"
                     data-anti-forgery-token="@tokens. RequestToken"
                     data-file-browse-url="@ckOptions. ImageBrowseUrl"
                     data-file-crop-url="@ckOptions. CropFileUrl"
                     data-target-path="@options. NewImagePath"
                     data-create-thumb="@options. CreateThumbnails. ToString().ToLower()"
                     data-resize-image="true"
                     data-keep-original="@options. KeepOriginalSizeImages. ToString().ToLower()"
                     data-enable-browse-server="@options. EnableBrowseServer. ToString().ToLower()"
                     data-enable-crop="@options. EnableCropping. ToString().ToLower()"
                     data-accepted-files="image/*"
                     data-target-fullsize-input-id="SectionTwoFullSizeUrl"
                     data-target-resized-input-id="SectionTwoResizedUrl"
                     data-target-thumb-input-id=""
                     data-target-fullsize-image-id="dz2Image"
                     data-target-resized-image-id=""
                     data-target-thumb-image-id=""
                     data-fullsize-placeholder-image="@options. PlaceholderImageUrl"
                     data-resized-placeholder-image=""
                     data-thumb-placeholder-image=""
                     data-resize-width="@options. ResizeMaxWidth"
                     data-resize-height="@options. ResizeMaxHeight"
                     data-crop-area-width="@options. CropAreaWidth"
                     data-crop-area-height="@options. CropAreaHeight">
                    @sr["Drop file here or click to browse device for file."] 
                </div>
                <div class="pl-1 pt-1">
                    <div class="d-flex flex-column">
                        <button id="dz2-browse-server" type="button" class="mb-1 btn btn-primary collapse">@sr["Browse Server"] <i class="fas fa-search" aria-hidden="true"></i></button>
                        <button id="dz2-save-crop" type="button" class="mb-1 btn btn-primary collapse">@sr["Save Crop"] <i class="far fa-save" aria-hidden="true"></i></button>
                    </div>
                </div>
            </div>
        </div>
        <input asp-for="SectionTwoFullSizeUrl" type="hidden" />
        <input asp-for="SectionTwoResizedUrl" type="hidden" />
        <div class="form-group">
            <label asp-for="SectionTwoAltText">@sr["Image Description"]</label>
            <input asp-for="SectionTwoAltText" class="form-control" />
        </div>
        <div class="form-group">
            <label asp-for="SectionTwoHeading">@sr["Section Heading - optional"]</label>
            <input asp-for="SectionTwoHeading" class="form-control" />
        </div>
        <label asp-for="SectionTwoContent">@sr["Section 2 Content"]</label>
        <textarea asp-for="SectionTwoContent" class="form-control"
                  data-ckeditor-unobtrusive=""
                  data-ckeditor-config-url="@ckOptions. CustomConfigPath"
                  data-ckeditor-config-language="@ckOptions. LanguageCode"
                  data-ckeditor-config-dropfileuploadurl="@ckOptions. DropFileUrl"
                  data-ckeditor-config-filebrowserurl="@ckOptions. FileBrowseUrl"
                  data-ckeditor-config-imagebrowseurl="@ckOptions. ImageBrowseUrl"></textarea>

    </div>

</div>

<div id="fileBrowseDialog" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" style="height:99%;min-width:99%!important;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true" title="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <iframe id="frFileDialog" frameborder="0" style="overflow:hidden;height:100%;width:100%;min-height: 650px;"></iframe>
        </div>
    </div>
</div>