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

@section('Limitless::Content')


    {{-- Description --}}
    @Limitless::ElementCardStart(['title' => "Navigation", 'icon' => 'icon-menu8'])
    <p>
        A vertical area that displays the items for website page navigation.
    </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">NavigationStart</h6>
            <p class="mb-3 text-muted">The main opening fragment of the navigation 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' => 'extra'],
                            ['value' => '<i>Array</i> [Default = <code>[]</code>]', 'secure' => false],
                            ['value' => 'Adds custom attributes for the main container. existing attributes such as class will be overwritten.']
                        ]
                    ])

                @Limitless::TableStop
            </div>
        </div>

        <div class="bg-dark rounded py-2 px-3 mb-3">
            <h6 class="mb-0 font-weight-semibold">NavigationStop</h6>
            <p class="mb-3 text-muted">The main closing fragment of the navigation 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">NavigationMenuSectionTitle</h6>
            <p class="mb-3 text-muted">Navigation section/group title.</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' => 'title'],
                            ['value' => '<i>String</i> [Default = <code>"No Title"</code>]', 'secure' => false],
                            ['value' => 'The title of the section to display.']
                        ]
                    ])

                @Limitless::TableStop
            </div>
        </div>

        <div class="bg-dark rounded py-2 px-3 mb-3">
            <h6 class="mb-0 font-weight-semibold">NavigationMenuItem</h6>
            <p class="mb-3 text-muted">The items that will be displayed for navigation.</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' => 'url'],
                            ['value' => '<i>String</i> [Default = <code>"#"</code>]', 'secure' => false],
                            ['value' => 'The link of the navigation item.']
                        ],
                        [
                            ['value' => 'target'],
                            ['value' => '<i>String</i> [Default = <code>"_self"</code>]', 'secure' => false],
                            ['value' => "Specifies the window where the linked page will be loaded. <code>_blank | _self | _parent | _top | framename</code>", 'secure' => false]
                        ],
                        [
                            ['value' => 'icon'],
                            ['value' => '<i>String</i> [Default = <code>"icon-primitive-dot"</code>]', 'secure' => false],
                            ['value' => 'The icon of the navigation item.'],
                        ],
                        [
                            ['value' => 'title'],
                            ['value' => '<i>String</i> [Default = <code>"No Title"</code>]', 'secure' => false],
                            ['value' => 'The title of the navigation item to display.']
                        ]
                    ])

                @Limitless::TableStop
            </div>
        </div>

        <div class="bg-dark rounded py-2 px-3 mb-3">
            <h6 class="mb-0 font-weight-semibold">NavigationMenuStart</h6>
            <p class="mb-3 text-muted">The opening fragment and the parent element of the nested navigation items.</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' => 'title'],
                            ['value' => '<i>String</i> [Default = <code>"No Title"</code>]', 'secure' => false],
                            ['value' => 'The title of the nested navigation item.']
                        ],
                        [
                            ['value' => 'icon'],
                            ['value' => '<i>String</i> [Default = <code>"icon-primitive-dot"</code>]', 'secure' => false],
                            ['value' => 'The icon of the nested navigation item.']
                        ]
                    ])

                @Limitless::TableStop
            </div>
        </div>

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

    @Limitless::ElementCardStop


    {{-- Sample Output --}}
    @Limitless::ElementCardStart(['title' => "Sample Output", 'icon' => 'icon-display4' ])
        @Limitless::NavigationStart([ 'extra' => ['id' => 'navigation-main', 'data-index' => 1] ])
            @Limitless::NavigationMenuSectionTitle(['title' => 'Menu section title 1'])
            @Limitless::NavigationMenuItem(['url' => '#', 'target' => '_self', 'icon' => 'icon-three-bars', 'title' => 'Menu Item 1'])
            @Limitless::NavigationMenuItem(['url' => '#', 'target' => '_self', 'icon' => 'icon-three-bars', 'title' => 'Menu Item 2'])
            @Limitless::NavigationMenuItem(['url' => '#', 'target' => '_self', 'icon' => 'icon-three-bars', 'title' => 'Menu Item 3'])
            @Limitless::NavigationMenuStart(['title' => 'Level 1 Submenu Item Parent', 'icon' => 'icon-three-bars'])
                @Limitless::NavigationMenuSectionTitle(['title' => 'Menu section title 2'])
                @Limitless::NavigationMenuItem(['url' => '#', 'target' => '_self', 'icon' => 'icon-three-bars', 'title' => 'Level 1 Submenu Item Child 1'])
                @Limitless::NavigationMenuItem(['url' => '#', 'target' => '_self', 'icon' => 'icon-three-bars', 'title' => 'Level 1 Submenu Item Child 2'])
                @Limitless::NavigationMenuStart(['title' => 'Level 2 Submenu Item Parent', 'icon' => 'icon-three-bars'])
                    @Limitless::NavigationMenuSectionTitle(['title' => 'Menu section title 3'])
                    @Limitless::NavigationMenuItem(['url' => '#', 'target' => '_self', 'icon' => 'icon-three-bars', 'title' => 'Level 2 Submenu Item Child 1'])
                    @Limitless::NavigationMenuItem(['url' => '#', 'target' => '_self', 'icon' => 'icon-three-bars', 'title' => 'Level 2 Submenu Item Child 2'])
                @Limitless::NavigationMenuStop
            @Limitless::NavigationMenuStop
        @Limitless::NavigationStop
    @Limitless::ElementCardStop

    @php
        $example = base64_decode("QExpbWl0bGVzczo6RWxlbWVudENhcmRTdGFydChbJ3RpdGxlJyA9PiAiU2FtcGxlIE91dHB1dCIsICdpY29uJyA9PiAnaWNvbi1kaXNwbGF5NCcgXSkKCUBMaW1pdGxlc3M6Ok5hdmlnYXRpb25TdGFydChbICdleHRyYScgPT4gWydpZCcgPT4gJ25hdmlnYXRpb24tbWFpbicsICdkYXRhLWluZGV4JyA9PiAxXSBdKQoJCUBMaW1pdGxlc3M6Ok5hdmlnYXRpb25NZW51U2VjdGlvblRpdGxlKFsndGl0bGUnID0+ICdNZW51IHNlY3Rpb24gdGl0bGUgMSddKQoJCUBMaW1pdGxlc3M6Ok5hdmlnYXRpb25NZW51SXRlbShbJ3VybCcgPT4gJyMnLCAndGFyZ2V0JyA9PiAnX3NlbGYnLCAnaWNvbicgPT4gJ2ljb24tdGhyZWUtYmFycycsICd0aXRsZScgPT4gJ01lbnUgSXRlbSAxJ10pCgkJQExpbWl0bGVzczo6TmF2aWdhdGlvbk1lbnVJdGVtKFsndXJsJyA9PiAnIycsICd0YXJnZXQnID0+ICdfc2VsZicsICdpY29uJyA9PiAnaWNvbi10aHJlZS1iYXJzJywgJ3RpdGxlJyA9PiAnTWVudSBJdGVtIDInXSkKCQlATGltaXRsZXNzOjpOYXZpZ2F0aW9uTWVudUl0ZW0oWyd1cmwnID0+ICcjJywgJ3RhcmdldCcgPT4gJ19zZWxmJywgJ2ljb24nID0+ICdpY29uLXRocmVlLWJhcnMnLCAndGl0bGUnID0+ICdNZW51IEl0ZW0gMyddKQoJCUBMaW1pdGxlc3M6Ok5hdmlnYXRpb25NZW51U3RhcnQoWyd0aXRsZScgPT4gJ0xldmVsIDEgU3VibWVudSBJdGVtIFBhcmVudCcsICdpY29uJyA9PiAnaWNvbi10aHJlZS1iYXJzJ10pCgkJCUBMaW1pdGxlc3M6Ok5hdmlnYXRpb25NZW51U2VjdGlvblRpdGxlKFsndGl0bGUnID0+ICdNZW51IHNlY3Rpb24gdGl0bGUgMiddKQoJCQlATGltaXRsZXNzOjpOYXZpZ2F0aW9uTWVudUl0ZW0oWyd1cmwnID0+ICcjJywgJ3RhcmdldCcgPT4gJ19zZWxmJywgJ2ljb24nID0+ICdpY29uLXRocmVlLWJhcnMnLCAndGl0bGUnID0+ICdMZXZlbCAxIFN1Ym1lbnUgSXRlbSBDaGlsZCAxJ10pCgkJCUBMaW1pdGxlc3M6Ok5hdmlnYXRpb25NZW51SXRlbShbJ3VybCcgPT4gJyMnLCAndGFyZ2V0JyA9PiAnX3NlbGYnLCAnaWNvbicgPT4gJ2ljb24tdGhyZWUtYmFycycsICd0aXRsZScgPT4gJ0xldmVsIDEgU3VibWVudSBJdGVtIENoaWxkIDInXSkKCQkJQExpbWl0bGVzczo6TmF2aWdhdGlvbk1lbnVTdGFydChbJ3RpdGxlJyA9PiAnTGV2ZWwgMiBTdWJtZW51IEl0ZW0gUGFyZW50JywgJ2ljb24nID0+ICdpY29uLXRocmVlLWJhcnMnXSkKCQkJCUBMaW1pdGxlc3M6Ok5hdmlnYXRpb25NZW51U2VjdGlvblRpdGxlKFsndGl0bGUnID0+ICdNZW51IHNlY3Rpb24gdGl0bGUgMyddKQoJCQkJQExpbWl0bGVzczo6TmF2aWdhdGlvbk1lbnVJdGVtKFsndXJsJyA9PiAnIycsICd0YXJnZXQnID0+ICdfc2VsZicsICdpY29uJyA9PiAnaWNvbi10aHJlZS1iYXJzJywgJ3RpdGxlJyA9PiAnTGV2ZWwgMiBTdWJtZW51IEl0ZW0gQ2hpbGQgMSddKQoJCQkJQExpbWl0bGVzczo6TmF2aWdhdGlvbk1lbnVJdGVtKFsndXJsJyA9PiAnIycsICd0YXJnZXQnID0+ICdfc2VsZicsICdpY29uJyA9PiAnaWNvbi10aHJlZS1iYXJzJywgJ3RpdGxlJyA9PiAnTGV2ZWwgMiBTdWJtZW51IEl0ZW0gQ2hpbGQgMiddKQoJCQlATGltaXRsZXNzOjpOYXZpZ2F0aW9uTWVudVN0b3AKCQlATGltaXRsZXNzOjpOYXZpZ2F0aW9uTWVudVN0b3AKCUBMaW1pdGxlc3M6Ok5hdmlnYXRpb25TdG9wCkBMaW1pdGxlc3M6OkVsZW1lbnRDYXJkU3RvcA==");
    @endphp

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

@stop
