<div id="{{id}}" class="modal fade" tabindex="-1" role="dialog" [attr.aria-labelledby]="title" aria-hidden="true"
     data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <!--
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    <span class="pficon pficon-close"></span>
                </button>
                -->
                <h1 class="modal-title" [innerHTML]="(title)"></h1>
            </div>
            <div class="modal-body">
                <p [innerHTML]="(body)"></p>
                <div [style.display]="confirmPhrase ? 'block' : 'none'">
                    <p>Type '<span style="white-space: pre;">{{confirmPhrase}}</span>' to confirm.</p>
                    <p>
                        <label class="sr-only" for="resource-to-delete">project to delete</label>
                        <input [(ngModel)]="typedConfirmationPhrase" id="resource-to-delete" type="text"
                               class="form-control input-lg"
                               autocorrect="off" autocapitalize="off" spellcheck="false" autofocus=""
                               (keyup)="confirmationFieldChanged($event.target.value)"
                        >
                    </p>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="confirm-button btn btn-lg" [ngClass]="yesClasses" (click)="yes()" [disabled]="!formValid">{{yesLabel}}</button>
                <button type="button" class="cancel-button  btn btn-lg" [ngClass]="noClasses"  (click)="no()">{{noLabel}}</button>
            </div>
        </div>
    </div>
</div>

