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

    @Limitless::ElementCardStart(['title' => "Codemirror"])

        <p>A themed writable container for codes.</p>
        @Limitless::Divider
        </br>
        <h6>Parameters</h6>
        @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

        @Limitless::Divider
        </br>
        <h6>Themes</h6>
        <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>

    @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
