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

@section('Limitless::Content')


    {{-- Description --}}
    @Limitless::ElementCardStart(['title' => "Card", 'icon' => 'icon-newspaper'])
        <p>A styled container for grouping contents.</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">ElementCardStart</h6>
            <p class="mb-3 text-muted">The opening fragment of the card 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' => 'title'],
                            ['value' => '<i>String</i> [Default = <code>"No Title"</code>]', 'secure' => false],
                            ['value' => 'The header title of the card.']
                        ],
                        [
                            ['value' => 'icon'],
                            ['value' => '<i>String</i> [Default = <code>"icon-circle2"</code>]', 'secure' => false],
                            ['value' => 'The header icon of the card.']
                        ],
                        [
                            ['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>

        <div class="bg-dark rounded py-2 px-3 mb-3">
            <h6 class="mb-0 font-weight-semibold">ElementCardStop</h6>
            <p class="mb-3 text-muted">The closing fragment of the card element.</p>
            <p class="font-italic font-size-lg">Parameters</p> NONE
        </div>

    @Limitless::ElementCardStop

    {{-- Sample Output --}}
    @Limitless::ElementCardStart(['title' => "Sample Output", 'icon' => 'icon-display4' ] )
        @Limitless::ElementCardStart(['title' => "Card", 'icon' => 'icon-newspaper', 'collapsible' => true, 'removable' => true, 'extra' => ['style' => 'position:relative;', 'id' => 'elemento1', 'class' => 'card']] )
            I am inside a card!
        @Limitless::ElementCardStop
    @Limitless::ElementCardStop

    @php
        $example = base64_decode("QExpbWl0bGVzczo6RWxlbWVudENhcmRTdGFydChbJ3RpdGxlJyA9PiAiQ2FyZCIsICdpY29uJyA9PiAnaWNvbi1uZXdzcGFwZXInLCAnY29sbGFwc2libGUnID0+IHRydWUsICdyZW1vdmVhYmxlJyA9PiB0cnVlLCAnZXh0cmEnID0+IFsnc3R5bGUnID0+ICdwb3NpdGlvbjpyZWxhdGl2ZTsnLCAnaWQnID0+ICdlbGVtZW50bzEnLCAnY2xhc3MnID0+ICdjYXJkJ11dICkKCUkgYW0gaW5zaWRlIGEgY2FyZCEKQExpbWl0bGVzczo6RWxlbWVudENhcmRTdG9w");
    @endphp

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



@stop
