<div ng-controller="Umbraco.PropertyEditors.textboxController">
    <ng-form name="textboxFieldForm">
        <input type="text" name="textbox" ng-model="model.value" id="{{model.alias}}"
               class="umb-property-editor umb-textstring textstring"
               val-server="value"
               ng-required="model.validation.mandatory"
               aria-required="model.validation.mandatory"
               aria-invalid="False"
               ng-trim="false"
               ng-keyup="model.change()" />
        
        <div ng-messages="textboxFieldForm.textbox.$error" show-validation-on-submit>
            <p class="sr-only" ng-message="valServer" tabindex="0">{{model.label}} {{textboxFieldForm.textbox.errorMsg}}</p>
            <p class="help-inline" ng-message="valServer" tabindex="0" aria-hidden="true">{{textboxFieldForm.textbox.errorMsg}}</p>
            <p class="help-inline" ng-message="required"><localize key="general_required">Required</localize></p>
        </div>

        <div class="help" ng-if="model.count >= (model.config.maxChars*.8) && model.count <= model.config.maxChars">
            <p class="sr-only" tabindex="0">{{model.label}} <localize key="textbox_characters_left" tokens="[model.config.maxChars - model.count]" watch-tokens="true">%0% characters left.</localize></p>
            <p aria-hidden="True"><localize key="textbox_characters_left" tokens="[model.config.maxChars - model.count]" watch-tokens="true">%0% characters left.</localize></p>
        </div>
        <div class="help text-error" ng-if="model.count > model.config.maxChars">
            <p class="sr-only" tabindex="0">{{model.label}} <localize key="textbox_characters_exceed" tokens="[model.config.maxChars, model.count - model.config.maxChars]" watch-tokens="true">Maximum %0% characters, <strong>%1%</strong> too many.</localize></p>
            <p aria-hidden="true"><localize key="textbox_characters_exceed" tokens="[model.config.maxChars, model.count - model.config.maxChars]" watch-tokens="true">Maximum %0% characters, <strong>%1%</strong> too many.</localize></p>
        </div>

    </ng-form>
</div>
