.sr-only(#ariaAnnounce aria-live="assertive")

.character-select.input-group
	input.form-control.text-center(
		#nameInput
		type="text"
		[(ngModel)]="pony.name"
		[maxlength]="maxNameLength"
		placeholder="Name of your character"
		aria-label="Name of your character")
	.input-group-append
		button.btn.btn-default(*ngIf="newButton" (click)="createNew()" [disabled]="!canNew" aria-label="Create New character")
			| new
		button.btn.btn-default(*ngIf="editButton" (click)="edit()" [disabled]="!canEdit" aria-label="Edit character")
			| edit

		.dropdown(dropdown #dropdown="ag-dropdown" (isOpenChange)="onToggle($event)" [focusOnOpen]="false")
			button.btn.btn-default.dropdown-toggle.br-0(
				[ngClass]="removeButton ? 'btn-no-round' : 'btn-no-round-left'"
				[disabled]="!hasPonies || joining" dropdownToggle aria-label="Select character")
			character-list.dropdown-menu(
				*dropdownMenu (close)="dropdown.close()" (selectCharacter)="select($event)" (newCharacter)="createNew()"
				(previewCharacter)="preview.emit($event)" [canNew]="!newButton && canNew")

		button.btn.btn-danger.remove-button(
			*ngIf="removeButton && !removing" (click)="remove()" [disabled]="!canRemove"
			tooltip="Delete pony" aria-label="Delete pony")
			fa-icon([icon]="deleteIcon" [fixedWidth]="true")
		button.btn.btn-danger.cancel-remove-button(
			*ngIf="removing" (click)="cancelRemove()"
			tooltip="Cancel delete" aria-label="Cancel delete")
			fa-icon([icon]="removeIcon" [fixedWidth]="true")
		button.btn.btn-success(
			*ngIf="removing" (click)="confirmRemove()" [disabled]="!canRemove"
			tooltip="Confirm delete" aria-label="Confirm delete")
			fa-icon([icon]="confirmIcon" [fixedWidth]="true")