<div id="{{id}}">
    <form  role="form" class="form-horizontal">

        <div class="row">
            <div class="col-xs-9">
                <div class="form-group">
                    <label class="col-sm-2 control-label" for="form_system">System</label>
                    <div class="col-sm-10">
                        <div class="input-group">
                            <label for="form_system"></label>
                            <select id="form_system" name="systemId" class="pf-select2 {{systemSelectClass}}" data-error="Choose a valid system" required>
                                {{#currentSystem}}
                                <option value="{{id}}">{{name}}</option>
                                {{/currentSystem}}
                            </select>
                            <span class="form-control-static fade" data-type="spinner">&nbsp;&nbsp;
                                <i class="fas fa-fw fa-lg fa-spin fa-sync txt-color txt-color-grayLight"></i>
                            </span>
                            <span class="help-block with-errors">Search system name</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xs-3">
                <div class="form-group" style="margin-bottom: 0;">
                    <div class="col-sm-offset-2 col-sm-10">
                        <div class="checkbox checkbox-primary">
                            <input id="{{lockId}}" name="locked" value="1" type="checkbox">
                            <label for="{{lockId}}">
                                Lock system
                            </label>
                            <div class="help-block with-errors"></div>
                        </div>

                        <div class="checkbox checkbox-primary">
                            <input id="{{rallyId}}" name="rallyUpdated" value="1" type="checkbox">
                            <label for="{{rallyId}}">
                                Rally point
                            </label>
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-9">
                <div class="form-group">
                    <label class="col-sm-2 control-label" for="{{statusSelectId}}">Status</label>
                    <div class="col-sm-6">
                        <select id="{{statusSelectId}}" name="statusId" class="form-control {{select2Class}}">
                            {{#statusData}}
                            <option value="{{id}}">{{text}}</option>
                            {{/statusData}}
                        </select>
                    </div>
                </div>
            </div>
        </div>

        {{! system info -------------------------------------------------------- }}

        <h4 class="pf-dynamic-area collapsed" data-toggle="collapse" data-target="#{{sectionInfoId}}" style="display: none;">
            System intel : <span id="{{sectionInfoStatusId}}"></span>
            <i class="fas fa-fw fa-question-circle pf-help-light" title="show persistent system data"></i>
        </h4>

        <div id="{{sectionInfoId}}" class="collapse">
            <div class="row">
                <div class="col-xs-5 col-sm-6">
                    <div class="form-group">
                        <label class="col-xs-3 col-sm-3 control-label">Alias</label>
                        <div class="col-xs-9 col-sm-9">
                            <div class="controls">
                                <div id="{{aliasId}}" class="form-control-static pf-dynamic-area"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xs-4 col-sm-3">
                    <div class="form-group">
                        <label class="col-xs-7 col-sm-8 control-label">Signatures</label>
                        <div class="col-xs-5 col-sm-4">
                            <div class="controls">
                                <div id="{{signaturesId}}" class="form-control-static pf-dynamic-area text-right txt-color"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xs-3 col-sm-3">
                    <div id="{{createdId}}" class="well well-sm well-text-number text-center" title="first create"></div>
                </div>
            </div>


            <div class="row">
                <div class="col-xs-9 col-sm-9">
                    <div class="form-group">
                        <label class="col-xs-3 col-sm-2 control-label">Description</label>
                        <div class="col-xs-9 col-sm-10">
                            <div class="controls">
                                <div id="{{descriptionId}}" class="form-control-static pf-dynamic-area"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xs-3 col-sm-3">
                    <div id="{{updatedId}}" class="well well-sm well-text-number text-center" title="last update/delete"></div>
                </div>
            </div>
        </div>

    </form>
</div>