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

@section('Limitless::Content')

    {{-- Description --}}
    @Limitless::ElementCardStart(['title' => "Alert", 'icon' => 'icon-bubble-notification'])
    <p>A styled container for alert messages.</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">Alert</h6>
            <p class="mb-3 text-muted">A styled container for alert messages.</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' => 'default'],
                        ['value' => '<i>Boolean</i> [Default = <code>true</code>]', 'secure' => false],
                        ['value' => 'Type of alert container whether <code>true = default</code> or <code>false = solid</code>.', 'secure' => false]
                    ],
                    [
                        ['value' => 'type'],
                        ['value' => '<i>String</i> [Default = <code>"primary"</code>]', 'secure' => false],
                        ['value' => 'Type of alert color whether <code>primary | success | danger | info | warning</code>.', 'secure' => false]
                    ],
                    [
                        ['value' => 'border'],
                        ['value' => '<i>String?</i> [Default = <code>null</code>]', 'secure' => false],
                        ['value' => 'Border container of the alert. <code>0 | 1 | 2 | 3</code>', 'secure' => false]
                    ],
                    [
                        ['value' => 'styled'],
                        ['value' => '<i>String?</i> [Default = <code>null</code>]', 'secure' => false],
                        ['value' => 'Adds icon depending on the alert type on <code>left</code> or <code>right</code> side of the container. ', 'secure' => false]
                    ],
                    [
                        ['value' => 'rounded'],
                        ['value' => '<i>Boolean</i> [Default = <code>false</code>]', 'secure' => false],
                        ['value' => 'Makes the container round shaped if set to <code>true</code>.', 'secure' => false]
                    ],
                    [
                        ['value' => 'dismissible'],
                        ['value' => '<i>Boolean</i> [Default = <code>false</code>]', 'secure' => false],
                        ['value' => 'Adds a closing button to make the container have an option to be dismissed.']
                    ],
                    [
                        ['value' => 'title'],
                        ['value' => '<i>String</i> [Default = <code>"No title."</code>]', 'secure' => false],
                        ['value' => 'The starting text of the alert message.']
                    ],
                    [
                        ['value' => 'message'],
                        ['value' => '<i>String</i> [Default = <code>"No message."</code>]', 'secure' => false],
                        ['value' => 'The main text of the alert message.']
                    ]
                ])
                @Limitless::TableStop
            </div>
        </div>

    @Limitless::ElementCardStop

    {{-- Sample Output --}}
    @Limitless::ElementCardStart(['title' => "Sample Output", 'icon' => 'icon-display4' ] )
        @Limitless::Alert
        @Limitless::Alert(['type' => 'success', 'title' => 'Success!', 'message' => 'Default success.'])
        @Limitless::Alert(['default' => false, 'type' => 'danger', 'title' => 'Danger!', 'message' => 'Solid danger dismissible.', 'dismissible' => true])
        @Limitless::Alert(['type' => 'info', 'title' => 'Info!', 'message' => 'Default info dismissible border 3.', 'dismissible' => true, 'border' => 3])
        @Limitless::Alert(['type' => 'primary', 'title' => 'Primary!', 'message' => 'Default primary dismissible styled left.', 'dismissible' => true, 'styled' => 'left'])
        @Limitless::Alert(['default' => false, 'type' => 'warning', 'title' => 'Warning!', 'message' => 'Solid warning dismissible styled right.', 'dismissible' => true, 'styled' => 'right'])
        @Limitless::Alert(['type' => 'success', 'title' => 'Round!', 'message' => 'Default success rounded styled left.', 'styled' => 'left', 'rounded' => true])
    @Limitless::ElementCardStop

    @php
        $example = base64_decode("QExpbWl0bGVzczo6QWxlcnQKQExpbWl0bGVzczo6QWxlcnQoWyd0eXBlJyA9PiAnc3VjY2VzcycsICd0aXRsZScgPT4gJ1N1Y2Nlc3MhJywgJ21lc3NhZ2UnID0+ICdEZWZhdWx0IHN1Y2Nlc3MuJ10pCkBMaW1pdGxlc3M6OkFsZXJ0KFsnZGVmYXVsdCcgPT4gZmFsc2UsICd0eXBlJyA9PiAnZGFuZ2VyJywgJ3RpdGxlJyA9PiAnRGFuZ2VyIScsICdtZXNzYWdlJyA9PiAnU29saWQgZGFuZ2VyIGRpc21pc3NpYmxlLicsICdkaXNtaXNzaWJsZScgPT4gdHJ1ZV0pCkBMaW1pdGxlc3M6OkFsZXJ0KFsndHlwZScgPT4gJ2luZm8nLCAndGl0bGUnID0+ICdJbmZvIScsICdtZXNzYWdlJyA9PiAnRGVmYXVsdCBpbmZvIGRpc21pc3NpYmxlIGJvcmRlciAzLicsICdkaXNtaXNzaWJsZScgPT4gdHJ1ZSwgJ2JvcmRlcicgPT4gM10pCkBMaW1pdGxlc3M6OkFsZXJ0KFsndHlwZScgPT4gJ3ByaW1hcnknLCAndGl0bGUnID0+ICdQcmltYXJ5IScsICdtZXNzYWdlJyA9PiAnRGVmYXVsdCBwcmltYXJ5IGRpc21pc3NpYmxlIHN0eWxlZCBsZWZ0LicsICdkaXNtaXNzaWJsZScgPT4gdHJ1ZSwgJ3N0eWxlZCcgPT4gJ2xlZnQnXSkKQExpbWl0bGVzczo6QWxlcnQoWydkZWZhdWx0JyA9PiBmYWxzZSwgJ3R5cGUnID0+ICd3YXJuaW5nJywgJ3RpdGxlJyA9PiAnV2FybmluZyEnLCAnbWVzc2FnZScgPT4gJ1NvbGlkIHdhcm5pbmcgZGlzbWlzc2libGUgc3R5bGVkIHJpZ2h0LicsICdkaXNtaXNzaWJsZScgPT4gdHJ1ZSwgJ3N0eWxlZCcgPT4gJ3JpZ2h0J10pCkBMaW1pdGxlc3M6OkFsZXJ0KFsndHlwZScgPT4gJ3N1Y2Nlc3MnLCAndGl0bGUnID0+ICdSb3VuZCEnLCAnbWVzc2FnZScgPT4gJ0RlZmF1bHQgc3VjY2VzcyByb3VuZGVkIHN0eWxlZCBsZWZ0LicsICdzdHlsZWQnID0+ICdsZWZ0JywgJ3JvdW5kZWQnID0+IHRydWVdKQ==");
    @endphp

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

@stop
