{{-- 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' => "Fragments", 'icon' => 'icon-grid5'])

        <div class="bg-dark rounded py-2 px-3 mb-3">
            <h6 class="mb-0 font-weight-semibold">TableStart</h6>
            <p class="mb-3 text-muted">The opening fragment of the table 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 table element. 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">TableStop</h6>
            <p class="mb-3 text-muted">The closing fragment of the table 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">TableAutofillHeader</h6>
            <p class="mb-3 text-muted">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 ])

            <div class="mb-3"></div>
            <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' => '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
            </div>
        </div>

        <div class="bg-dark rounded py-2 px-3 mb-3">
            <h6 class="mb-0 font-weight-semibold">TableAutofillBody</h6>
            <p class="mb-3 text-muted">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 ])

            <div class="mb-3"></div>
            <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' => '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
            </div>
        </div>

    @Limitless::ElementCardStop

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

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

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

            @Limitless::TableAutofillBody([
                [
                    ['value' => 'Data <span class="text-info">1</span> Row <span class="text-primary">1</span>', 'secure' => false],
                    ['value' => '<i>Data 2 Row </i><sup>1</sup>', 'secure' => false],
                    ['value' => '<u>Data 3 Row 1</u>', 'secure' => false],
                    ['value' => 'Data 4 Row 1']
                ],
                [
                    ['value' => 'Data 1 Row 2'],
                    ['value' => '<code>Data 2 Row <sub>2</sub></code>', 'secure' => false],
                    ['value' => '<mark>Data 3 Row 2</mark>', 'secure' => false],
                    ['value' => '<b><s>Data 4</s> Row 2</b>', 'secure' => false],
                ]
            ])

        @Limitless::TableStop

    @Limitless::ElementCardStop

    @php
        $example = base64_decode("QExpbWl0bGVzczo6VGFibGVTdGFydChbICdleHRyYScgPT4gWydjbGFzcycgPT4gJ3RhYmxlIHRhYmxlLXN0cmlwZWQnXSBdKQoKCUBMaW1pdGxlc3M6OlRhYmxlQXV0b2ZpbGxIZWFkZXIoWwoJCVsnbmFtZScgPT4gJ0NvbHVtbiAxJ10sCgkJWyduYW1lJyA9PiAnPGEgaHJlZj0iIyI+VXJsIENvbHVtbiAyPC9hPicsICdzZWN1cmUnID0+IGZhbHNlXSwKCQlbJ25hbWUnID0+ICdDb2x1bW4gMyddLAoJCVsnbmFtZScgPT4gJ0NvbHVtbiA0J10KCV0pCgoJQExpbWl0bGVzczo6VGFibGVBdXRvZmlsbEJvZHkoWwoJCVsKCQkJWyd2YWx1ZScgPT4gJ0RhdGEgPHNwYW4gY2xhc3M9InRleHQtaW5mbyI+MTwvc3Bhbj4gUm93IDxzcGFuIGNsYXNzPSJ0ZXh0LXByaW1hcnkiPjE8L3NwYW4+JywgJ3NlY3VyZScgPT4gZmFsc2VdLAoJCQlbJ3ZhbHVlJyA9PiAnPGk+RGF0YSAyIFJvdyA8L2k+PHN1cD4xPC9zdXA+JywgJ3NlY3VyZScgPT4gZmFsc2VdLAoJCQlbJ3ZhbHVlJyA9PiAnPHU+RGF0YSAzIFJvdyAxPC91PicsICdzZWN1cmUnID0+IGZhbHNlXSwKCQkJWyd2YWx1ZScgPT4gJ0RhdGEgNCBSb3cgMSddCgkJXSwKCQlbCgkJCVsndmFsdWUnID0+ICdEYXRhIDEgUm93IDInXSwKCQkJWyd2YWx1ZScgPT4gJzxjb2RlPkRhdGEgMiBSb3cgPHN1Yj4yPC9zdWI+PC9jb2RlPicsICdzZWN1cmUnID0+IGZhbHNlXSwKCQkJWyd2YWx1ZScgPT4gJzxtYXJrPkRhdGEgMyBSb3cgMjwvbWFyaz4nLCAnc2VjdXJlJyA9PiBmYWxzZV0sCgkJCVsndmFsdWUnID0+ICc8Yj48cz5EYXRhIDQ8L3M+IFJvdyAyPC9iPicsICdzZWN1cmUnID0+IGZhbHNlXSwKCQldCgldKQoKQExpbWl0bGVzczo6VGFibGVTdG9w");
    @endphp

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

@stop
