{{#if entity.name}}
    {{> headers/_TitleWithSubAndIcon title=entity.name dynamicTitle="true" type="console.scripts.edit.script" icon="code" buttons="templates/admin/views/realms/partials/_HeaderDeleteButton" }}
{{else}}
    {{> headers/_TitleWithSubAndIcon title="common.form.createNew" type="console.scripts.edit.script" icon="code" buttons="templates/admin/views/realms/partials/_HeaderDeleteButton" }}
{{/if}}

<div class="panel panel-default panel-content">
    <div class="panel-body form-horizontal">
        <!-- NAME -->
        <div class="form-group">
            <label class="col-sm-2 control-label">{{t "console.common.name"}}</label>

            <div class="col-sm-9">
                <input type="text" id="name" name="scriptName" class="form-control" value="{{entity.name}}"
                       data-field="name" placeholder="{{t 'common.form.validation.required'}}" autofocus required>
            </div>
        </div>

        <!-- DESCRIPTION -->
        <div class="form-group">
            <label class="col-sm-2 control-label">{{t "console.common.description"}}</label>

            <div class="col-sm-9">
                <textarea id="description" class="form-control pull-left script-text" rows="3"
                          data-field="description">{{entity.description}}</textarea>
            </div>
        </div>

        <!-- CONTEXT -->
        <div class="form-group">
            <label class="col-sm-2 control-label">{{t "console.scripts.edit.scriptType"}}</label>

            <div class="col-sm-9 script-context">
                <span class="form-control" id="context">{{contextName}}</span>
                <button type="button" id="changeContext" class="btn fr-btn-secondary pull-right">
                    <i class="fa fa-gear"></i> {{t "common.form.change"}}
                </button>
            </div>
        </div>

        <!-- LANGUAGE -->
        <div class="form-group">
            <label class="col-sm-2 control-label">{{t "console.scripts.edit.language"}}</label>

            <div class="col-sm-9">
                {{#if languages.[1]}}
                    {{#each languages}}
                    <div class="radio">
                        <label>
                            <input type="radio" name="language" id="{{id}}" value="{{id}}" data-field="language"
                                {{#equals ../entity.language id}} checked {{/equals}}> {{name}}
                        </label>
                    </div>
                    {{/each}}
                {{else}}
                    {{#each languages}}
                    <input class="form-control" value="{{name}}" readonly />
                    {{/each}}
                {{/if}}
            </div>
        </div>

        <!--SCRIPT-->
        <div class="form-group">
            <label class="col-sm-2 control-label" for="script">{{t "console.scripts.edit.script"}}</label>

            <div class="col-sm-9">
                <div class="script-area">
                    <textarea id="script">{{entity.script}}</textarea>
                </div>

                <input type="button" class="btn btn-default script-upload" id="upload" value="{{t 'common.form.upload'}}">
                <input type="file" name="upload" class="hidden">

                <input type="button" class="btn btn-default" id="validateScript" value="{{t 'common.form.validate'}}">

                <button type="button" class="btn btn-default" id="editFullScreen">
                    <i class="fa fa-expand"></i> {{t "console.common.editFullScreen"}}
                </button>

                <div id="validation" class="script-validation-message"></div>
            </div>
        </div>
    </div>

    <div class="panel-footer clearfix">
        <div class="script-changes-pending pull-left"></div>
        <button id="saveChanges" class="btn btn-primary pull-right" type="button">{{t 'common.form.save'}}</button>
    </div>

    <div class="full-screen-bar">
        <button type="button" class="btn btn-link pull-right">
            <i class="fa fa-compress"></i> {{t "console.common.exitFullScreen"}}
        </button>
    </div>
</div>