﻿@model LayoutViewModel
@{
    var centerCss = "col-lg-12";
    if (Model. ContentLeft ! = null && Model. ContentRight ! = null)
    {
        centerCss = "col-lg-6";
    }
    else if (Model. ContentLeft ! = null || Model. ContentRight ! = null)
    {
        centerCss = "col-lg-9";
    }
}

@if (Model. LayoutBefore ! = null)
{
    <div id="layout-before" class="layout-before">
        <view model="Model. LayoutBefore"></view>
    </div>
}

<div id="layout" class="layout">
    <div id="layout-header" class="layout-header">
        <div class="layout-header-container">
            @if (Model. Alerts ! = null)
            {
                <div class="layout-alerts">
                    <view model="Model. Alerts"></view>
                </div>
            }
            @if (Model. HeaderRight ! = null)
            {
                <div class="layout-header-right">
                    <view model="Model. HeaderRight" />
                </div>
            }
            @if (Model. Header ! = null)
            {
                <div class="layout-header-item">
                    <view model="Model. Header" />
                </div>
            }
        </div>
    </div>
    <div id="layout-body" class="layout-body row gutter-sm">
        @if (Model. ContentLeft ! = null)
        {
            <div id="layout-content-left" class="layout-content-left col-lg-3">
                <a href="#" data-toggle="tooltip" title="@T["Navigation"]" class="btn btn-primary position-fixed slide-out-bottom-left active img-48 d-lg-none" style="z-index:10;" data-provide="asides" data-target="#contentLeftAsides">
                    <i class="fal fa-bars"></i>
                </a>
                <div class="asides" id="contentLeftAsides" tabindex="-1" aria-hidden="true">
                    <div class="asides-dialog asides-left">
                        <div class="asides-content">
                            <div class="asides-header">
                                <h6 class="asides-title" id="searchHelpTitle">
                                    @T["Browse"]
                                </h6>
                                <button type="button" class="close" data-dismiss="asides" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="asides-body overflow-auto">
                                <view model="Model. ContentLeft"></view>
                            </div>
                            <div class="asides-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="asides">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        }
        @if (Model. Content ! = null)
        {
            <div id="layout-content" class="layout-content @centerCss">
                @if (Model. Tools ! = null || Model. ToolsRight ! = null)
                {
                    <section role="toolbar" class="layout-content-tools">
                        @if (Model. ToolsRight ! = null)
                        {
                            <div class="layout-content-tools-right">
                                <view model="Model. ToolsRight"></view>
                            </div>
                        }
                        @if (Model. Tools ! = null)
                        {
                            <view model="Model. Tools" />
                        }
                    </section>
                }
                <view model="Model. Content"></view>
                @if (Model. Actions ! = null || Model. ActionsRight ! = null)
                {
                    <section role="toolbar" id="layout-content-actions" class=" layout-content-actions">
                        <card class="card">
                            <card-body>
                                @if (Model. ActionsRight ! = null)
                                {
                                    <div class="layout-content-actions-right">
                                        <view model="Model. ActionsRight"></view>
                                    </div>
                                }
                                @if (Model. Actions ! = null)
                                {
                                    <view model="Model. Actions" />
                                }
                            </card-body>
                        </card>
                    </section>
                }
            </div>
        }
        @if (Model. ContentRight ! = null)
        {
            <div id="layout-content-right" class="layout-content-right col-lg-3">
                <a href="#" data-toggle="tooltip" title="@T["Navigation"]" class="btn btn-primary position-fixed slide-out-bottom-right active img-48 d-lg-none" style="z-index:10;" data-provide="asides" data-target="#contentRightAsides">
                    <i class="fal fa-bars"></i>
                </a>
                <div class="asides" id="contentRightAsides" tabindex="-1" aria-hidden="true">
                    <div class="asides-dialog asides-right">
                        <div class="asides-content">
                            <div class="asides-header">
                                <h6 class="asides-title" id="searchHelpTitle">
                                    @T["Browse"]
                                </h6>
                                <button type="button" class="close" data-dismiss="asides" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="asides-body overflow-auto">
                                <view model="Model. ContentRight"></view>
                            </div>
                            <div class="asides-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="asides">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        }
    </div>
    <div id="layout-footer" class="layout-footer">
        @if (Model. FooterRight ! = null)
        {
            <div class="layout-footer-right">
                <view model="Model. FooterRight" />
            </div>
        }
        @if (Model. Footer ! = null)
        {
            <view model="Model. Footer"></view>
        }
    </div>
</div>

@if (Model. LayoutAfter ! = null)
{
    <div id="layout-after" class="layout-after">
        <view model="Model. LayoutAfter"></view>
    </div>
}

@if (Model. ResizeHeader ! = null ||
Model. ResizeHeaderRight ! = null ||
Model. ResizeContent ! = null ||
Model. ResizeActions ! = null ||
Model. ResizeActionsRight ! = null)
{
    <div class="resizable resizable-bottom resizable-hidden" data-provide="resizeable">
        <div class="resizable-bar">
            <i class="fal fa-bars"></i>
        </div>
        <div class="resizable-container overflow-auto">

            @if (Model. ResizeHeader ! = null || Model. ResizeHeaderRight ! = null)
            {
                <div class="resizable-header">
                    @if (Model. ResizeHeaderRight ! = null)
                    {
                        <div class="float-right">
                            <view model="Model. ResizeHeaderRight" />
                        </div>
                    }
                    @if (Model. ResizeHeader ! = null)
                    {
                        <view model="Model. ResizeHeader" />
                    }
                </div>
            }

            @*<h6 class="d-inline-block text-uppercase">@T["Your Feedback"]</h6>
                    <ul class="nav navbar">
                        <li class="nav-item">
                            <a href="#" data-toggle="tooltip" title="@T["Close / Minimize"]" class="nav-link text-muted resizable-close"><i class="fal fa-fw fa-times"></i></a>
                        </li>
                    </ul>
                </div>*@

            @if (Model. ResizeContent ! = null)
            {
                <div class="resizable-body">
                    <view model="Model. ResizeContent"></view>
                </div>
            }

            @if (Model. ResizeActions ! = null || Model. ResizeActionsRight ! = null)
            {
                <div class="resizable-footer">
                    <card>
                        <card-body>
                            @if (Model. ResizeActionsRight ! = null)
                            {
                                <div class="float-right">
                                    <view model="Model. ResizeActionsRight" />
                                </div>
                            }
                            @if (Model. ResizeActions ! = null)
                            {
                                <div class="float-left">
                                    <view model="Model. ResizeActions" />
                                </div>
                            }
                        </card-body>
                    </card>
                </div>
            }

        </div>
    </div>
}
