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

@section('Limitless::Content')


    {{-- Description --}}
    @Limitless::CardStart(['title' => "Description", 'icon' => 'icon-info22'])
        <p>
            A styled container for grouping contents. For more details, refer to the original documentation
            <a href="/ceetrox/sidekick/resource/public/Webdesigns/design-limitless/Template/layout_1/LTR/dark/full/content_cards.html" target="_blank">
                here
            </a>.
        </p>
    @Limitless::CardStop

    {{-- Basics --}}
    @Limitless::CardStart(['title' => "Basics", 'icon' => 'icon-book'])

        <div class="bg-dark rounded py-2 px-3 mb-3">
            <h6 class="mb-0 font-weight-semibold">Output</h6>
            @Limitless::Divider
            <div class="mt-2">
                @Limitless::CardStart( ['title' => "Card"] )
                    @Limitless::LoremIpsum
                @Limitless::CardStop
            </div>
        </div>

        @php
            $example = base64_decode("QExpbWl0bGVzczo6Q2FyZFN0YXJ0KCBbJ3RpdGxlJyA9PiAiQ2FyZCJdICkKCUBMaW1pdGxlc3M6OkxvcmVtSXBzdW0KQExpbWl0bGVzczo6Q2FyZFN0b3A=");
        @endphp

        <div class="bg-dark rounded py-2 px-3 mb-3">
            <h6 class="mb-0 font-weight-semibold">Code</h6>
            @Limitless::Divider
            <div class="mt-2">
                @Limitless::Codemirror([ 'language' => 'javascript', 'theme' => 'zenburn', 'value' => $example ])
            </div>
        </div>

        <div class="bg-dark rounded py-2 px-3 mb-3">
            <h6 class="mb-0 font-weight-semibold">Parameters</h6>
            @Limitless::Divider
            <div class="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 header title of the card.']
                        ]
                    ])

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

    @Limitless::CardStop

    {{-- Styling --}}
    @Limitless::CardStart(['title' => "Styling", 'icon' => 'icon-brush', 'extra' => ['class' => 'card card-collapsed'] ])

        <div class="bg-dark rounded py-2 px-3 mb-3">
            <h6 class="mb-0 font-weight-semibold">Output</h6>
            @Limitless::Divider
            <div class="mt-2">
                @Limitless::CardStart( ['icon' => "icon-newspaper"] )
                    @Limitless::LoremIpsum
                @Limitless::CardStop
            </div>
        </div>

        @php
            $example = base64_decode("QExpbWl0bGVzczo6Q2FyZFN0YXJ0KCBbJ2ljb24nID0+ICJpY29uLW5ld3NwYXBlciJdICkKCUBMaW1pdGxlc3M6OkxvcmVtSXBzdW0KQExpbWl0bGVzczo6Q2FyZFN0b3A=");
        @endphp

        <div class="bg-dark rounded py-2 px-3 mb-3">
            <h6 class="mb-0 font-weight-semibold">Code</h6>
            @Limitless::Divider
            <div class="mt-2">
                @Limitless::Codemirror([ 'language' => 'javascript', 'theme' => 'zenburn', 'value' => $example ])
            </div>
        </div>

        <div class="bg-dark rounded py-2 px-3 mb-3">
            <h6 class="mb-0 font-weight-semibold">Parameters</h6>
            <div class="mt-2">
                @Limitless::TableStart([ 'extra' => ['class' => 'table table-xs table-striped'] ])

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

                    @Limitless::TableAutofillBody([
                        [
                            ['value' => 'icon'],
                            ['value' => '<i>String</i> [Default = <code>null</code>]', 'secure' => false],
                            ['value' => 'The header icon of the card.']
                        ]
                    ])

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

    @Limitless::CardStop


    {{-- Attributes --}}
    @Limitless::CardStart(['title' => "Attributes", 'icon' => 'icon-tree5', 'extra' => ['class' => 'card card-collapsed'] ])

    <div class="bg-dark rounded py-2 px-3 mb-3">
        <h6 class="mb-0 font-weight-semibold">Output</h6>
        @Limitless::Divider
        <div class="mt-2">
            @Limitless::CardStart([ 'collapsible' => false, 'removable' => true, 'extra' => ['style' => 'position:relative;', 'id' => 'elemento1', 'class' => 'card my-card-css-class'] ])
                @Limitless::LoremIpsum
            @Limitless::CardStop
        </div>
    </div>

    @php
        $example = base64_decode("QExpbWl0bGVzczo6Q2FyZFN0YXJ0KFsgJ2NvbGxhcHNpYmxlJyA9PiBmYWxzZSwgJ3JlbW92YWJsZScgPT4gdHJ1ZSwgJ2V4dHJhJyA9PiBbJ3N0eWxlJyA9PiAncG9zaXRpb246cmVsYXRpdmU7JywgJ2lkJyA9PiAnZWxlbWVudG8xJywgJ2NsYXNzJyA9PiAnY2FyZCBteS1jYXJkLWNzcy1jbGFzcyddIF0pCglATGltaXRsZXNzOjpMb3JlbUlwc3VtCkBMaW1pdGxlc3M6OkNhcmRTdG9w");
    @endphp

    <div class="bg-dark rounded py-2 px-3 mb-3">
        <h6 class="mb-0 font-weight-semibold">Code</h6>
        @Limitless::Divider
        <div class="mt-2">
            @Limitless::Codemirror([ 'language' => 'javascript', 'theme' => 'zenburn', 'value' => $example ])
        </div>
    </div>

    <div class="bg-dark rounded py-2 px-3 mb-3">
        <h6 class="mb-0 font-weight-semibold">Parameters</h6>
        <div class="mt-2">
            @Limitless::TableStart([ 'extra' => ['class' => 'table table-xs table-striped'] ])

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

                @Limitless::TableAutofillBody([
                    [
                        ['value' => 'collapsible'],
                        ['value' => '<i>Boolean</i> [Default = <code>true</code>]', 'secure' => false],
                        ['value' => 'Option to make the card body to show or hide.']
                    ],
                    [
                        ['value' => 'removable'],
                        ['value' => '<i>Boolean</i> [Default = <code>false</code>]', 'secure' => false],
                        ['value' => 'Option to show or hide the close button.']
                    ],
                    [
                        ['value' => 'extra'],
                        ['value' => '<i>Array</i> [Default = <code>[]</code>]', 'secure' => false],
                        ['value' => 'Adds custom attributes for the card div element. existing attributes such as class will be overwritten.']
                    ]
                ])

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

    @Limitless::CardStop

@stop
