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

@section('Limitless::Content')

    {{-- Description --}}
    @Limitless::ElementCardStart(['title' => "Example", 'icon' => 'icon-exclamation'])
        <p>Example Div element with custom javascript and stylesheet files.</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">Example</h6>
            <p class="mb-3 text-muted">Example Div element with custom javascript and stylesheet files.</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::Example
    @Limitless::ElementCardStop

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

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

@stop
