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

@section('Limitless::Content')

    {{-- Description --}}
    @Limitless::ElementCardStart(['title' => "Code Mirror", 'icon' => 'icon-circle-code'])
        A themed writable container for codes.
    @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">Codemirror</h6>
        <p class="mb-3 text-muted">A themed writable container for codes.</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' => 'language'],
                        ['value' => '<i>String</i> [Default = <code>""</code>]', 'secure' => false],
                        ['value' => 'The language of the code to write. <code>javascript | manticore | python | shell</code>', 'secure' => false]
                    ],
                    [
                        ['value' => 'theme'],
                        ['value' => '<i>String</i> [Default = <code>"icecoder"</code>]', 'secure' => false],
                        ['value' => 'The theme of the editor.']
                    ],
                    [
                        ['value' => 'value'],
                        ['value' => '<i>String</i> [Default = <code>"... no value parameter set..."</code>]', 'secure' => false],
                        ['value' => 'The value or text to display.']
                    ],
                    [
                        ['value' => 'extra'],
                        ['value' => '<i>Array</i> [Default = <code>[]</code>]', 'secure' => false],
                        ['value' => 'Adds custom attributes for the codemirror element. existing attributes such as class will be overwritten.']
                    ]
                ])

            @Limitless::TableStop
        </div>

        <div class="mb-3"></div>
        <p class="font-italic font-size-lg">Themes</p>
        <div class="row mt-2">
            <code>
                3024-day | 3024-night | abcdef | ambiance | base16-dark | base16-light | bespin | blackboard | cobalt |
                codemirror | colorforth | darcula | dracula | duotone-dark | duotone-light | eclipse | elegant | erlang-dark |
                gruvbox-dark | hopscotch | icecoder | idea | isotope | lesser-dark | liquibyte | lucario | material | mbo |
                mdn-like | midnight | monokai | neat | neo | night | nord | oceanic-next | panda-syntax | paraiso-dark |
                paraiso-light | pastel-on-dark | railscasts | rubyblue | seti | shadowfox | solarized | the-matrix |
                tomorrow-night-bright | tomorrow-night-eighties | ttcn | twilight | vibrant-ink | xq-dark | xq-light |
                yeti | yonce | zenburn
            </code>
        </div>

    </div>

    @Limitless::ElementCardStop

    {{-- Sample Output --}}
    @Limitless::ElementCardStart(['title' => "Sample Output", 'icon' => 'icon-display4' ] )
        @Limitless::Codemirror([ 'language' => 'javascript', 'theme' => 'zenburn', 'value' => 'Hello World!', 'extra' => ['id' => 'codemirror1', 'data-is-modified' => true] ])
    @Limitless::ElementCardStop

    @php
        $example = base64_decode("QExpbWl0bGVzczo6Q29kZW1pcnJvcihbICdsYW5ndWFnZScgPT4gJ2phdmFzY3JpcHQnLCAndGhlbWUnID0+ICd6ZW5idXJuJywgJ3ZhbHVlJyA9PiAnSGVsbG8gV29ybGQhJywgJ2V4dHJhJyA9PiBbJ2lkJyA9PiAnY29kZW1pcnJvcjEnLCAnZGF0YS1pcy1tb2RpZmllZCcgPT4gdHJ1ZV0gXSk=");
    @endphp

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


@stop
