{{-- Layout Reference --}}
@extends('Limitless::Help.Layout.Master')

@section('Limitless::Content')


    {{-- Description --}}
    @Limitless::ElementCardStart(['title' => "Modal", 'icon' => 'icon-stack'])
        <p>A styled container for dialogs.</p>
    @Limitless::ElementCardStop

    {{-- Elements --}}
    @Limitless::ElementCardStart(['title' => "Fragments", 'icon' => 'icon-grid5'])

        <div class="bg-dark rounded py-2 px-3 mb-3">
            <h6 class="mb-0 font-weight-semibold">ModalStart</h6>
            <p class="mb-3 text-muted">The opening fragment of the modal element.</p>
            <p class="font-italic font-size-lg">Parameters</p>
            <div class="row mt-2">

                @Limitless::TableStart([ 'extra' => ['class' => 'table table-xs table-striped'] ])

                    @Limitless::TableAutofillHeader([
                        ['name' => 'Key'],
                        ['name' => 'Type'],
                        ['name' => 'Description']
                    ])

                    @Limitless::TableAutofillBody([
                        [
                            ['value' => 'id'],
                            ['value' => '<i>String</i> [Default = <code>null</code>]', 'secure' => false],
                            ['value' => 'The identification of the modal. This is needed to manipulate the modal.']
                        ],
                        [
                            ['value' => 'animate'],
                            ['value' => '<i>Boolean</i> [Default = <code>true</code>]', 'secure' => false],
                            ['value' => 'Adds or removes the fading animation of the modal on opening and closing.']
                        ],
                        [
                            ['value' => 'keyboard'],
                            ['value' => '<i>Boolean</i> [Default = <code>true</code>]', 'secure' => false],
                            ['value' => 'Disables the closing of the modal by using the <code>Esc</code> key when set to <code>false</code>.', 'secure' => false]
                        ],
                        [
                            ['value' => 'backdrop'],
                            ['value' => '<i>Boolean</i> [Default = <code>true</code>]', 'secure' => false],
                            ['value' => 'Disables the backdrop of the modal when set to <code>false</code>. When backdrop is disabled, users will not be able to close the modal by clicking outside it.', 'secure' => false]
                        ],
                        [
                            ['value' => 'size'],
                            ['value' => '<i>String?</i> [Default = <code>null</code>]', 'secure' => false],
                            ['value' => 'Sets the size of the modal. The default size of the modal will be placed if the parameter is not set. <code>xs | sm | lg | full</code>', 'secure' => false]
                        ],
                        [
                            ['value' => 'scrollable'],
                            ['value' => '<i>Boolean</i> [Default = <code>false</code>]', 'secure' => false],
                            ['value' => 'Enables the vertical scrollbar on the body of the modal if set to <code>true</code>', 'secure' => false]
                        ],
                        [
                            ['value' => 'icon'],
                            ['value' => '<i>String?</i> [Default = <code>null</code>]', 'secure' => false],
                            ['value' => 'The header icon of the modal.']
                        ],
                        [
                            ['value' => 'title'],
                            ['value' => '<i>String|Array</i> [Default = <code>"No title"</code>]', 'secure' => false],
                            ['value' => 'The header title of the modal. Pass as array with <code>value</code> and <code>secure</code> keys if we want to put HTML tags on the title.', 'secure' => false]
                        ],
                        [
                            ['value' => 'subtitle'],
                            ['value' => '<i>String?|Array?</i> [Default = <code>null</code>]', 'secure' => false],
                            ['value' => 'The header subtitle of the modal. Pass as array with <code>value</code> and <code>secure</code> keys if we want to put HTML tags on the subtitle.', 'secure' => false]
                        ],
                    ])

                @Limitless::TableStop

            </div>
        </div>

        <div class="bg-dark rounded py-2 px-3 mb-3">
            <h6 class="mb-0 font-weight-semibold">ModalStop</h6>
            <p class="mb-3 text-muted">The closing fragment of the modal element.</p>
            <p class="font-italic font-size-lg">Parameters</p> NONE
        </div>

        <div class="bg-dark rounded py-2 px-3 mb-3">
            <h6 class="mb-0 font-weight-semibold">ModalBodyStart</h6>
            <p class="mb-3 text-muted">The opening fragment of the modal body.</p>
            <p class="font-italic font-size-lg">Parameters</p> NONE
        </div>

        <div class="bg-dark rounded py-2 px-3 mb-3">
            <h6 class="mb-0 font-weight-semibold">ModalBodyStop</h6>
            <p class="mb-3 text-muted">The closing fragment of the modal body.</p>
            <p class="font-italic font-size-lg">Parameters</p> NONE
        </div>

        <div class="bg-dark rounded py-2 px-3 mb-3">
            <h6 class="mb-0 font-weight-semibold">ModalFooterStart</h6>
            <p class="mb-3 text-muted">The opening fragment of the modal footer.</p>
            <p class="font-italic font-size-lg">Parameters</p>
            <div class="row mt-2">

                @Limitless::TableStart([ 'extra' => ['class' => 'table table-xs table-striped'] ])

                    @Limitless::TableAutofillHeader([
                        ['name' => 'Key'],
                        ['name' => 'Type'],
                        ['name' => 'Description']
                    ])

                    @Limitless::TableAutofillBody([
                        [
                            ['value' => 'scrollable'],
                            ['value' => '<i>Boolean</i> [Default = <code>false</code>]', 'secure' => false],
                            ['value' => 'Adds a top padding on the footer container if <code>true</code>', 'secure' => false]
                        ]
                    ])

                @Limitless::TableStop

            </div>
        </div>

        <div class="bg-dark rounded py-2 px-3 mb-3">
            <h6 class="mb-0 font-weight-semibold">ModalFooterStop</h6>
            <p class="mb-3 text-muted">The closing fragment of the modal footer.</p>
            <p class="font-italic font-size-lg">Parameters</p> NONE
        </div>

    @Limitless::ElementCardStop

    @Limitless::ElementCardStart(['title' => "Events", 'icon' => 'icon-power2' ] )
        @Limitless::TableStart([ 'extra' => ['class' => 'table table-xs table-striped'] ])

            @Limitless::TableAutofillHeader([
                ['name' => 'Name'],
                ['name' => 'Code'],
                ['name' => 'Description'],
            ])

            @Limitless::TableAutofillBody([
                [
                    ['value' => 'OnShow'],
                    ['value' => '<code>show.bs.modal</code>', 'secure' => false],
                    ['value' => 'Triggers before showing up the modal.']
                ],
                [
                    ['value' => 'OnShown'],
                    ['value' => '<code>shown.bs.modal</code>', 'secure' => false],
                    ['value' => 'Triggers after the modal has been shown.']
                ],
                [
                    ['value' => 'OnHide'],
                    ['value' => '<code>hide.bs.modal</code>', 'secure' => false],
                    ['value' => 'Triggers before the modal will be hidden.']
                ],
                [
                    ['value' => 'OnHidden'],
                    ['value' => '<code>hidden.bs.modal</code>', 'secure' => false],
                    ['value' => 'Triggers after the modal has been hidden.']
                ]
            ])

        @Limitless::TableStop
    @Limitless::ElementCardStop

    {{-- Sample Output --}}
    @Limitless::ElementCardStart(['title' => "Sample Output", 'icon' => 'icon-display4' ] )

        {{-- Modals --}}
        @Limitless::ModalStart(['id' => 'modal_lg_test', 'title' => 'Modal Large Sample', 'icon' => 'icon-menu7', 'size' => 'lg', 'subtitle' => 'Subtitle'])
            @Limitless::ModalBodyStart
                @Limitless::LoremIpsum(['length' => 50])
                @Limitless::Divider
                @Limitless::LoremIpsum(['length' => 100])
            @Limitless::ModalBodyStop
            @Limitless::ModalFooterStart
                <button class="btn btn-link" data-dismiss="modal"><i class="icon-cross2 font-size-base mr-1"></i> Close</button>
                <button class="btn bg-primary"><i class="icon-checkmark3 font-size-base mr-1"></i> Okay</button>
            @Limitless::ModalFooterStop
        @Limitless::ModalStop

        @Limitless::ModalStart(['id' => 'modal_xs_test', 'title' => ['value' => 'Modal Extra Small <b><i>XS</i></b>', 'secure' => false], 'icon' => 'icon-menu7', 'size' => 'xs', 'subtitle' => ['value' => 'Subtitle <b><i>unsercured</i></b>', 'secure' => false]])
            @Limitless::ModalBodyStart
                @Limitless::LoremIpsum(['length' => 20])
            @Limitless::ModalBodyStop
        @Limitless::ModalStop

        @Limitless::ModalStart(['id' => 'modal_scrollable_test', 'title' => 'Modal Scrollable', 'icon' => 'icon-menu7', 'size' => 'xs', 'scrollable' => true, 'subtitle' => ['secure' => false]])
            @Limitless::ModalBodyStart
                @Limitless::LoremIpsum(['length' => 500])
            @Limitless::ModalBodyStop
            @Limitless::ModalFooterStart(['scrollable' => true])
                <button class="btn btn-link" data-dismiss="modal"><i class="icon-cross2 font-size-base mr-1"></i> Close</button>
                <button class="btn bg-primary"><i class="icon-checkmark3 font-size-base mr-1"></i> Okay</button>
            @Limitless::ModalFooterStop
        @Limitless::ModalStop

        @Limitless::ModalStart(['id' => 'modal_backdrop_test', 'title' => 'Modal No Backdrop', 'icon' => 'icon-menu7', 'backdrop' => false ])
            @Limitless::ModalBodyStart
                @Limitless::LoremIpsum(['length' => 20])
            @Limitless::ModalBodyStop
        @Limitless::ModalStop

        @Limitless::ModalStart(['id' => 'modal_keyboard_test', 'title' => 'Modal No Keyboard Interaction', 'icon' => 'icon-menu7', 'keyboard' => false ])
            @Limitless::ModalBodyStart
                @Limitless::LoremIpsum(['length' => 20])
            @Limitless::ModalBodyStop
        @Limitless::ModalStop

        @Limitless::ModalStart(['id' => 'modal_no_animation_test', 'title' => 'Modal No Animation', 'icon' => 'icon-menu7', 'animate' => false ])
            @Limitless::ModalBodyStart
                @Limitless::LoremIpsum(['length' => 50])
            @Limitless::ModalBodyStop
        @Limitless::ModalStop

        {{-- Modal Events --}}
        @Limitless::ModalStart(['id' => 'modal_onshow', 'title' => 'Modal Event OnShow', 'icon' => 'icon-menu7', 'size' => 'xs'])
            @Limitless::ModalBodyStart
                @Limitless::LoremIpsum(['length' => 20])
            @Limitless::ModalBodyStop
        @Limitless::ModalStop

        @Limitless::ModalStart(['id' => 'modal_onshown', 'title' => 'Modal Event OnShown', 'icon' => 'icon-menu7', 'size' => 'xs'])
            @Limitless::ModalBodyStart
                @Limitless::LoremIpsum(['length' => 20])
            @Limitless::ModalBodyStop
        @Limitless::ModalStop

        @Limitless::ModalStart(['id' => 'modal_onhide', 'title' => 'Modal Event OnHide', 'icon' => 'icon-menu7', 'size' => 'xs'])
            @Limitless::ModalBodyStart
                @Limitless::LoremIpsum(['length' => 20])
            @Limitless::ModalBodyStop
        @Limitless::ModalStop

        @Limitless::ModalStart(['id' => 'modal_onhidden', 'title' => 'Modal Event OnHidden', 'icon' => 'icon-menu7', 'size' => 'xs'])
            @Limitless::ModalBodyStart
                @Limitless::LoremIpsum(['length' => 20])
            @Limitless::ModalBodyStop
        @Limitless::ModalStop

        {{-- Modal buttons --}}
        <button type="button" class="btn btn-light mb-1" data-toggle="modal" data-target="#modal_lg_test">Large modal</button>
        <button type="button" class="btn btn-light mb-1" data-toggle="modal" data-target="#modal_xs_test">Extra small modal</button>
        <button type="button" class="btn btn-light mb-1" data-toggle="modal" data-target="#modal_scrollable_test">Scrollable modal</button>
        <button type="button" class="btn btn-light mb-1" data-toggle="modal" data-target="#modal_backdrop_test">No backdrop modal</button>
        <button type="button" class="btn btn-light mb-1" data-toggle="modal" data-target="#modal_keyboard_test">No keyboard interaction modal</button>
        <button type="button" class="btn btn-light mb-1" data-toggle="modal" data-target="#modal_no_animation_test">No animation modal</button>

        @Limitless::Divider

        {{-- Modal event buttons --}}
        <button type="button" class="btn btn-light mb-1" data-toggle="modal" data-target="#modal_onshow">Fire modal event onShow</button>
        <button type="button" class="btn btn-light mb-1" data-toggle="modal" data-target="#modal_onshown">Fire modal event onShown</button>
        <button type="button" class="btn btn-light mb-1" data-toggle="modal" data-target="#modal_onhide">Fire modal event onHide</button>
        <button type="button" class="btn btn-light mb-1" data-toggle="modal" data-target="#modal_onhidden">Fire modal event onHidden</button>


    @Limitless::ElementCardStop

    @php
        $example = base64_decode(" ");
    @endphp

    {{-- Sample Code --}}
    @Limitless::ElementCardStart(['title' => "Sample Code", 'icon' => 'icon-circle-code' ] )
        @Limitless::Codemirror([ 'language' => 'javascript', 'theme' => 'zenburn', 'value' => $example ])
    @Limitless::ElementCardStop



@stop
