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

@section('Limitless::Content')

    @php
        $example = base64_decode("QExpbWl0bGVzczo6TmF2aWdhdGlvblN0YXJ0CiAgICBATGltaXRsZXNzOjpOYXZpZ2F0aW9uTWVudVNlY3Rpb25UaXRsZShbJ3RpdGxlJyA9PiAnTWVudSBzZWN0aW9uIHRpdGxlIDEnXSkKICAgIEBMaW1pdGxlc3M6Ok5hdmlnYXRpb25NZW51SXRlbShbJ3VybCcgPT4gJz9wYWdlPWNhcmQnLCAndGFyZ2V0JyA9PiAnX3NlbGYnLCAnaWNvbicgPT4gJ2ljb24tc3F1YXJlJywgJ3RpdGxlJyA9PiAnQ2FyZCddKQogICAgQExpbWl0bGVzczo6TmF2aWdhdGlvbk1lbnVJdGVtKFsndXJsJyA9PiAnP3BhZ2U9dGFibGUnLCAndGFyZ2V0JyA9PiAnX2JsYW5rJywgJ2ljb24nID0+ICdpY29uLXRhYmxlMicsICd0aXRsZScgPT4gJ1RhYmxlJ10pCiAgICBATGltaXRsZXNzOjpOYXZpZ2F0aW9uTWVudUl0ZW0oWyd1cmwnID0+ICc/cGFnZT1uYXZpZ2F0aW9uJywgJ3RhcmdldCcgPT4gJ19zZWxmJywgJ2ljb24nID0+ICdpY29uLW1lbnU4JywgJ3RpdGxlJyA9PiAnTmF2aWdhdGlvbiddKQogICAgQExpbWl0bGVzczo6TmF2aWdhdGlvbk1lbnVTdGFydChbJ3RpdGxlJyA9PiAnTGV2ZWwgMSBTdWJtZW51IGV4YW1wbGUnLCAnaWNvbicgPT4gJ2ljb24tdGhyZWUtYmFycyddKQogICAgICAgIEBMaW1pdGxlc3M6Ok5hdmlnYXRpb25NZW51U2VjdGlvblRpdGxlKFsndGl0bGUnID0+ICdNZW51IHNlY3Rpb24gdGl0bGUgMiddKQogICAgICAgIEBMaW1pdGxlc3M6Ok5hdmlnYXRpb25NZW51SXRlbShbJ3VybCcgPT4gJz9wYWdlPWNhcmQnLCAndGFyZ2V0JyA9PiAnX2JsYW5rJywgJ2ljb24nID0+ICdpY29uLXNxdWFyZScsICd0aXRsZScgPT4gJ0NhcmQnXSkKICAgICAgICBATGltaXRsZXNzOjpOYXZpZ2F0aW9uTWVudUl0ZW0oWyd1cmwnID0+ICc/cGFnZT10YWJsZScsICd0YXJnZXQnID0+ICdfYmxhbmsnLCAnaWNvbicgPT4gJ2ljb24tdGFibGUyJywgJ3RpdGxlJyA9PiAnVGFibGUnXSkKICAgICAgICBATGltaXRsZXNzOjpOYXZpZ2F0aW9uTWVudVN0YXJ0KFsndGl0bGUnID0+ICdMZXZlbCAyIFN1Ym1lbnUgZXhhbXBsZScsICdpY29uJyA9PiAnaWNvbi10aHJlZS1iYXJzJ10pCiAgICAgICAgICAgIEBMaW1pdGxlc3M6Ok5hdmlnYXRpb25NZW51U2VjdGlvblRpdGxlKFsndGl0bGUnID0+ICdNZW51IHNlY3Rpb24gdGl0bGUgMiddKQogICAgICAgICAgICBATGltaXRsZXNzOjpOYXZpZ2F0aW9uTWVudUl0ZW0oWyd1cmwnID0+ICc/cGFnZT1jYXJkJywgJ3RhcmdldCcgPT4gJ19ibGFuaycsICdpY29uJyA9PiAnaWNvbi1zcXVhcmUnLCAndGl0bGUnID0+ICdDYXJkJ10pCiAgICAgICAgICAgIEBMaW1pdGxlc3M6Ok5hdmlnYXRpb25NZW51SXRlbShbJ3VybCcgPT4gJz9wYWdlPXRhYmxlJywgJ3RhcmdldCcgPT4gJ19ibGFuaycsICdpY29uJyA9PiAnaWNvbi10YWJsZTInLCAndGl0bGUnID0+ICdUYWJsZSddKQogICAgICAgIEBMaW1pdGxlc3M6Ok5hdmlnYXRpb25NZW51U3RvcAogICAgQExpbWl0bGVzczo6TmF2aWdhdGlvbk1lbnVTdG9wCkBMaW1pdGxlc3M6Ok5hdmlnYXRpb25TdG9w");
    @endphp

    {{-- Description --}}
    @Limitless::ElementCardStart(['title' => "Navigation", 'icon' => 'icon-file-text3', 'collapsable' => true, 'removeable' => false, 'extra' => ['style' => 'position:relative;', 'id' => 'elemento1', 'class' => 'card'] ])
        Description for navigation element here.
    @Limitless::ElementCardStop

    {{-- Sample Output --}}
    @Limitless::ElementCardStart(['title' => "Sample Output", 'icon' => 'icon-display' ] )
        @Limitless::NavigationStart
            @Limitless::NavigationMenuSectionTitle(['title' => 'Menu section title 1'])
            @Limitless::NavigationMenuItem(['url' => '?page=card', 'target' => '_self', 'icon' => 'icon-square', 'title' => 'Card'])
            @Limitless::NavigationMenuItem(['url' => '?page=table', 'target' => '_blank', 'icon' => 'icon-table2', 'title' => 'Table'])
            @Limitless::NavigationMenuItem(['url' => '?page=navigation', 'target' => '_self', 'icon' => 'icon-menu8', 'title' => 'Navigation'])
            @Limitless::NavigationMenuStart(['title' => 'Level 1 Submenu example', 'icon' => 'icon-three-bars'])
                @Limitless::NavigationMenuSectionTitle(['title' => 'Menu section title 2'])
                @Limitless::NavigationMenuItem(['url' => '?page=card', 'target' => '_blank', 'icon' => 'icon-square', 'title' => 'Card'])
                @Limitless::NavigationMenuItem(['url' => '?page=table', 'target' => '_blank', 'icon' => 'icon-table2', 'title' => 'Table'])
                @Limitless::NavigationMenuStart(['title' => 'Level 2 Submenu example', 'icon' => 'icon-three-bars'])
                    @Limitless::NavigationMenuSectionTitle(['title' => 'Menu section title 2'])
                    @Limitless::NavigationMenuItem(['url' => '?page=card', 'target' => '_blank', 'icon' => 'icon-square', 'title' => 'Card'])
                    @Limitless::NavigationMenuItem(['url' => '?page=table', 'target' => '_blank', 'icon' => 'icon-table2', 'title' => 'Table'])
                @Limitless::NavigationMenuStop
            @Limitless::NavigationMenuStop
        @Limitless::NavigationStop
    @Limitless::ElementCardStop

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

@stop
