{{- /*
  Usage: `mustache [args]`

  `args` are:
    template: required, the logical Moodle mustache template name
    class: any extra class(es) to be added to the rendendered template `div` - default ""
    show_markup: if the markup should be output in the HTML - default: `true`
*/ -}}

<div id="root{{- .Position.LineNumber -}}" data-region="mustachecode" data-template="{{- .Get "template" -}}" class="mb-5 mt-2 bg-light p-4">
    <div class="d-none" data-region="rawcontext">{{- (trim .Inner "\n") -}}</div>
    <h6 data-action="refresh" class="mb-3">{{- .Get "template" -}}</h6>
    <nav>
        <div class="nav nav-tabs" id="nav-tab" role="tablist">
            <a class="nav-item nav-link active"
                id="nav-rendered{{- .Position.LineNumber -}}-tab"
                data-toggle="tab"
                href="#nav-rendered{{- .Position.LineNumber -}}"
                role="tab" aria-controls="nav-rendered{{- .Position.LineNumber -}}" aria-selected="true"
            >
                Rendered
            </a>
            <a class="nav-item nav-link"
                id="nav-template{{- .Position.LineNumber -}}-tab"
                data-toggle="tab"
                href="#nav-template{{- .Position.LineNumber -}}" role="tab" aria-controls="nav-template{{- .Position.LineNumber -}}" aria-selected="false"
            >
                Template
            </a>
            <a class="nav-item nav-link"
                id="nav-variables{{- .Position.LineNumber -}}-tab"
                data-toggle="tab"
                href="#nav-variables{{- .Position.LineNumber -}}" role="tab" aria-controls="nav-variables{{- .Position.LineNumber -}}" aria-selected="false"
            >
                Variables
            </a>
        </div>
    </nav>
    <div class="tab-content border-start border-bottom border-end p-3 bg-white" id="nav-tabContent">
        <div class="tab-pane fade show active" id="nav-rendered{{- .Position.LineNumber -}}" role="tabpanel" aria-labelledby="nav-rendered{{- .Position.LineNumber -}}-tab">
            <div data-region="mustacherendered" class="{{ with .Get "class" }}{{ . }}{{ end }}">
                <div class="d-flex justify-content-center my-5">
                    <div class="spinner-grow text-secondary" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="nav-template{{- .Position.LineNumber -}}" role="tabpanel" aria-labelledby="nav-template{{- .Position.LineNumber -}}-tab">
            <pre data-region="mustachesource" class="mb3">
            </pre>
        </div>
        <div class="tab-pane fade" id="nav-variables{{- .Position.LineNumber -}}" role="tabpanel" aria-labelledby="nav-variables{{- .Position.LineNumber -}}-tab">
            <div data-region="mustachecontext" class="mb3">
                {{- highlight (trim .Inner "\n") "js" "" -}}
            </div>
        </div>
    </div>
</div>