{{-- 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.
        Consists of <i>six (6)</i> elements.
    </p>
    @Limitless::ElementCardStop

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

        @Limitless::ElementCardStart(['title' => "NavigationStart"])

            <p>The main opening element for the navigation.</p>
            @Limitless::Divider
            </br>
            <h6>Parameters</h6>
            @Limitless::TableStart([ 'extra' => ['class' => 'table table-xs table-striped'] ])

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

                @Limitless::TableAutofillBody([
                    [
                        ['value' => 'extra'],
                        ['value' => 'Adds custom attributes for the main container. existing attributes such as class will be overwritten.'],
                        ['value' => "<code>'extra' => ['style' => 'position:relative;', 'id' => 'nav1', 'class' => 'nav nav-custom-style']</code>", 'secure' => false],
                    ]
                ])
            @Limitless::TableStop

        @Limitless::ElementCardStop

        @Limitless::ElementCardStart(['title' => "NavigationStop"])

            <p>The main closing element for the navigation.</p>
            @Limitless::Divider
            </br>
            <h6>Parameters : NONE</h6>

        @Limitless::ElementCardStop

        @Limitless::ElementCardStart(['title' => "NavigationMenuSectionTitle"])

            <p>Navigation section/group title.</p>
            @Limitless::Divider
            </br>
            <h6>Parameters</h6>
            @Limitless::TableStart([ 'extra' => ['class' => 'table table-xs table-striped'] ])

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

                @Limitless::TableAutofillBody([
                    [
                        ['value' => 'title'],
                        ['value' => 'The title of the section to display.'],
                        ['value' => "<code>['title' => 'Navigation']</code>", 'secure' => false],
                    ]
                ])

            @Limitless::TableStop

        @Limitless::ElementCardStop

        @Limitless::ElementCardStart(['title' => "NavigationMenuItem"])

        <p>The items that will be displayed for navigation.</p>
        @Limitless::Divider
        </br>
        <h6>Parameters</h6>
        @Limitless::TableStart([ 'extra' => ['class' => 'table table-xs table-striped'] ])

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

            @Limitless::TableAutofillBody([
                [
                    ['value' => 'url'],
                    ['value' => 'The link of the navigation item.'],
                    ['value' => "<code>['url' => '?page=navigation']</code>", 'secure' => false],
                ],
                [
                    ['value' => 'target'],
                    ['value' => "Specifies the window where the linked page will be loaded.", 'secure' => false],
                    ['value' => "<code>['target' => '_blank'] ( _blank | _self | _parent | _top | framename )</code>", 'secure' => false],
                ],
                [
                    ['value' => 'icon'],
                    ['value' => 'The icon of the navigation item.'],
                    ['value' => "<code>['icon' => 'icon-menu8']</code>", 'secure' => false],
                ],
                [
                    ['value' => 'title'],
                    ['value' => 'The title of the navigation item to display.'],
                    ['value' => "<code>['title' => 'Card']</code>", 'secure' => false],
                ]
            ])

        @Limitless::TableStop

        @Limitless::ElementCardStop

        @Limitless::ElementCardStart(['title' => "NavigationMenuStart"])

        <p>The opening and the parent element for the nested navigation items.</p>
        @Limitless::Divider
        </br>
        <h6>Parameters</h6>
        @Limitless::TableStart([ 'extra' => ['class' => 'table table-xs table-striped'] ])

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

            @Limitless::TableAutofillBody([
                [
                    ['value' => 'title'],
                    ['value' => 'The title of the nested navigation item.'],
                    ['value' => "<code>['title' => 'More Navigation']</code>", 'secure' => false],
                ],
                [
                    ['value' => 'icon'],
                    ['value' => 'The icon of the nested navigation item.'],
                    ['value' => "<code>['icon' => 'icon-three-bars']</code>", 'secure' => false],
                ]
            ])

        @Limitless::TableStop

        @Limitless::ElementCardStop

        @Limitless::ElementCardStart(['title' => "NavigationMenuStop"])

        <p>The closing element for the nested navigation items.</p>
        @Limitless::Divider
        </br>
        <h6>Parameters : NONE</h6>

        @Limitless::ElementCardStop

    @Limitless::ElementCardStop


    {{-- Sample Output --}}
    @Limitless::ElementCardStart(['title' => "Sample Output", 'icon' => 'icon-display4' ] )
        @Limitless::NavigationStart
            @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("QExpbWl0bGVzczo6RWxlbWVudENhcmRTdGFydChbJ3RpdGxlJyA9PiAiU2FtcGxlIE91dHB1dCIsICdpY29uJyA9PiAnaWNvbi1kaXNwbGF5NCcgXSApCglATGltaXRsZXNzOjpOYXZpZ2F0aW9uU3RhcnQKCQlATGltaXRsZXNzOjpOYXZpZ2F0aW9uTWVudVNlY3Rpb25UaXRsZShbJ3RpdGxlJyA9PiAnTWVudSBzZWN0aW9uIHRpdGxlIDEnXSkKCQlATGltaXRsZXNzOjpOYXZpZ2F0aW9uTWVudUl0ZW0oWyd1cmwnID0+ICcjJywgJ3RhcmdldCcgPT4gJ19zZWxmJywgJ2ljb24nID0+ICdpY29uLXRocmVlLWJhcnMnLCAndGl0bGUnID0+ICdNZW51IEl0ZW0gMSddKQoJCUBMaW1pdGxlc3M6Ok5hdmlnYXRpb25NZW51SXRlbShbJ3VybCcgPT4gJyMnLCAndGFyZ2V0JyA9PiAnX3NlbGYnLCAnaWNvbicgPT4gJ2ljb24tdGhyZWUtYmFycycsICd0aXRsZScgPT4gJ01lbnUgSXRlbSAyJ10pCgkJQExpbWl0bGVzczo6TmF2aWdhdGlvbk1lbnVJdGVtKFsndXJsJyA9PiAnIycsICd0YXJnZXQnID0+ICdfc2VsZicsICdpY29uJyA9PiAnaWNvbi10aHJlZS1iYXJzJywgJ3RpdGxlJyA9PiAnTWVudSBJdGVtIDMnXSkKCQlATGltaXRsZXNzOjpOYXZpZ2F0aW9uTWVudVN0YXJ0KFsndGl0bGUnID0+ICdMZXZlbCAxIFN1Ym1lbnUgSXRlbSBQYXJlbnQnLCAnaWNvbicgPT4gJ2ljb24tdGhyZWUtYmFycyddKQoJCQlATGltaXRsZXNzOjpOYXZpZ2F0aW9uTWVudVNlY3Rpb25UaXRsZShbJ3RpdGxlJyA9PiAnTWVudSBzZWN0aW9uIHRpdGxlIDInXSkKCQkJQExpbWl0bGVzczo6TmF2aWdhdGlvbk1lbnVJdGVtKFsndXJsJyA9PiAnIycsICd0YXJnZXQnID0+ICdfc2VsZicsICdpY29uJyA9PiAnaWNvbi10aHJlZS1iYXJzJywgJ3RpdGxlJyA9PiAnTGV2ZWwgMSBTdWJtZW51IEl0ZW0gQ2hpbGQgMSddKQoJCQlATGltaXRsZXNzOjpOYXZpZ2F0aW9uTWVudUl0ZW0oWyd1cmwnID0+ICcjJywgJ3RhcmdldCcgPT4gJ19zZWxmJywgJ2ljb24nID0+ICdpY29uLXRocmVlLWJhcnMnLCAndGl0bGUnID0+ICdMZXZlbCAxIFN1Ym1lbnUgSXRlbSBDaGlsZCAyJ10pCgkJCUBMaW1pdGxlc3M6Ok5hdmlnYXRpb25NZW51U3RhcnQoWyd0aXRsZScgPT4gJ0xldmVsIDIgU3VibWVudSBJdGVtIFBhcmVudCcsICdpY29uJyA9PiAnaWNvbi10aHJlZS1iYXJzJ10pCgkJCQlATGltaXRsZXNzOjpOYXZpZ2F0aW9uTWVudVNlY3Rpb25UaXRsZShbJ3RpdGxlJyA9PiAnTWVudSBzZWN0aW9uIHRpdGxlIDMnXSkKCQkJCUBMaW1pdGxlc3M6Ok5hdmlnYXRpb25NZW51SXRlbShbJ3VybCcgPT4gJyMnLCAndGFyZ2V0JyA9PiAnX3NlbGYnLCAnaWNvbicgPT4gJ2ljb24tdGhyZWUtYmFycycsICd0aXRsZScgPT4gJ0xldmVsIDIgU3VibWVudSBJdGVtIENoaWxkIDEnXSkKCQkJCUBMaW1pdGxlc3M6Ok5hdmlnYXRpb25NZW51SXRlbShbJ3VybCcgPT4gJyMnLCAndGFyZ2V0JyA9PiAnX3NlbGYnLCAnaWNvbicgPT4gJ2ljb24tdGhyZWUtYmFycycsICd0aXRsZScgPT4gJ0xldmVsIDIgU3VibWVudSBJdGVtIENoaWxkIDInXSkKCQkJQExpbWl0bGVzczo6TmF2aWdhdGlvbk1lbnVTdG9wCgkJQExpbWl0bGVzczo6TmF2aWdhdGlvbk1lbnVTdG9wCglATGltaXRsZXNzOjpOYXZpZ2F0aW9uU3RvcApATGltaXRsZXNzOjpFbGVtZW50Q2FyZFN0b3A=");
    @endphp

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

@stop
