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

@section('Limitless::Content')

    {{-- Description --}}
    @Limitless::ElementCardStart(['title' => "Table", 'icon' => 'icon-table2'])
        <p>A data container with rows and columns.</p>
    @Limitless::ElementCardStop

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

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

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

                @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 table element. existing attributes such as class will be overwritten.']
                    ]
                ])
            @Limitless::TableStop

        @Limitless::ElementCardStop

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

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

        @Limitless::ElementCardStop

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

            <p>Populates column headers. Parameters needs to be inside an array of column arrays.</p>

            @php
                $headerExample = base64_decode("Ly8gbWFpbiBhcnJheQpbCgkvLyBjb2x1bW5zIGFycmF5CglbJ25hbWUnID0+ICdDb2x1bW4xJywgJ3NlY3VyZScgPT4gZmFsc2VdLAoJWyduYW1lJyA9PiAnQ29sdW1uMiddLAoJWyduYW1lJyA9PiAnQ29sdW1uMyddCl0=");
            @endphp

            @Limitless::Codemirror([ 'language' => 'javascript', 'theme' => 'zenburn', 'value' => $headerExample ])

            @Limitless::Divider
            </br>
            <h6>Parameters</h6>
            @Limitless::TableStart([ 'extra' => ['class' => 'table table-xs table-striped table-docu'] ])

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

                @Limitless::TableAutofillBody([
                    [
                        ['value' => 'name'],
                        ['value' => '<i>String</i> [Default = <code>""</code>]', 'secure' => false],
                        ['value' => 'Column header name to display.']
                    ],
                    [
                        ['value' => 'secure'],
                        ['value' => '<i>Boolean</i> [Default = <code>true</code>]', 'secure' => false],
                        ['value' => 'Sets the <code>name</code> value to secure or unsecure. If secure is <code>false</code>, value can have HTML tags.', 'secure' => false]
                    ]
                ])

            @Limitless::TableStop

        @Limitless::ElementCardStop

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

            <p>Populates the table body data. Parameters needs to be inside an array of row array of column arrays.</p>

            @php
                $bodyExample = base64_decode("Ly8gbWFpbiBhcnJheQpbCgkvLyBwZXIgcm93IGFycmF5CglbCgkJLy8gcGVyIGNvbHVtbiBhcnJheQoJCVsndmFsdWUnID0+ICdyb3cgMSBkYXRhIDEnLCAnc2VjdXJlJyA9PiBmYWxzZV0sCgkJWyd2YWx1ZScgPT4gJ3JvdyAxIGRhdGEgMiddCgldLAoJWwoJCVsndmFsdWUnID0+ICdyb3cgMiBkYXRhIDEnXSwKCQlbJ3ZhbHVlJyA9PiAncm93IDIgZGF0YSAyJ10KCV0KXQ==");
            @endphp

            @Limitless::Codemirror([ 'language' => 'javascript', 'theme' => 'zenburn', 'value' => $bodyExample ])

            @Limitless::Divider
            </br>
            <h6>Parameters</h6>
            @Limitless::TableStart([ 'extra' => ['class' => 'table table-xs table-striped table-docu'] ])

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

                @Limitless::TableAutofillBody([
                    [
                        ['value' => 'value'],
                        ['value' => '<i>String</i> [Default = <code>""</code>]', 'secure' => false],
                        ['value' => 'Cell value per column to display.']
                    ],
                    [
                        ['value' => 'secure'],
                        ['value' => '<i>Boolean</i> [Default = <code>true</code>]', 'secure' => false],
                        ['value' => 'Sets the <code>name</code> value to secure or unsecure. If secure is <code>false</code>, value can have HTML tags.', 'secure' => false]
                    ]
                ])

            @Limitless::TableStop

        @Limitless::ElementCardStop

    @Limitless::ElementCardStop

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

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

            @Limitless::TableAutofillHeader([
                ['name' => 'Column 1'],
                ['name' => '<a href="#">Url Column 2</a>', 'secure' => false],
                ['name' => 'Column 3'],
                ['name' => 'Column 4']
            ])

            @Limitless::TableAutofillBody([
                [
                    ['value' => 'Data 1 Row 1'],
                    ['value' => '<i>Data 2 Row 1</i>', 'secure' => false],
                    ['value' => 'Data 3 Row 1'],
                    ['value' => 'Data 4 Row 1']
                ],
                [
                    ['value' => 'Data 1 Row 2'],
                    ['value' => '<code>Data 2 Row 2</code>', 'secure' => false],
                    ['value' => 'Data 3 Row 2'],
                    ['value' => '<b>Data 4 Row 2</b>', 'secure' => false],
                ]
            ])

        @Limitless::TableStop

    @Limitless::ElementCardStop

    @php
        $example = base64_decode("QExpbWl0bGVzczo6VGFibGVTdGFydChbICdleHRyYScgPT4gWydjbGFzcycgPT4gJ3RhYmxlIHRhYmxlLXN0cmlwZWQgdGFibGUtZG9jdSddIF0pCgoJQExpbWl0bGVzczo6VGFibGVBdXRvZmlsbEhlYWRlcihbCgkJWyduYW1lJyA9PiAnQ29sdW1uIDEnXSwKCQlbJ25hbWUnID0+ICc8YSBocmVmPSIjIj5VcmwgQ29sdW1uIDI8L2E+JywgJ3NlY3VyZScgPT4gZmFsc2VdLAoJCVsnbmFtZScgPT4gJ0NvbHVtbiAzJ10sCgkJWyduYW1lJyA9PiAnQ29sdW1uIDQnXQoJXSkKCglATGltaXRsZXNzOjpUYWJsZUF1dG9maWxsQm9keShbCgkJWwoJCQlbJ3ZhbHVlJyA9PiAnRGF0YSAxIFJvdyAxJ10sCgkJCVsndmFsdWUnID0+ICc8aT5EYXRhIDIgUm93IDE8L2k+JywgJ3NlY3VyZScgPT4gZmFsc2VdLAoJCQlbJ3ZhbHVlJyA9PiAnRGF0YSAzIFJvdyAxJ10sCgkJCVsndmFsdWUnID0+ICdEYXRhIDQgUm93IDEnXQoJCV0sCgkJWwoJCQlbJ3ZhbHVlJyA9PiAnRGF0YSAxIFJvdyAyJ10sCgkJCVsndmFsdWUnID0+ICc8Y29kZT5EYXRhIDIgUm93IDI8L2NvZGU+JywgJ3NlY3VyZScgPT4gZmFsc2VdLAoJCQlbJ3ZhbHVlJyA9PiAnRGF0YSAzIFJvdyAyJ10sCgkJCVsndmFsdWUnID0+ICc8Yj5EYXRhIDQgUm93IDI8L2I+JywgJ3NlY3VyZScgPT4gZmFsc2VdLAoJCV0KCV0pCgpATGltaXRsZXNzOjpUYWJsZVN0b3A=");
    @endphp

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

@stop
