<modal-dialog>
    <div class="modal-header">
        <h4 class="modal-title" ng-if="!project">
          <span translate>New project</span>
          <a tabindex="0" role="button" popover-placement="right" popover-trigger="focus"
              popover="A repository namespace for images">
            <span class="fa fa-lg fa-info-circle"></span>
          </a>
        </h4>
        <h3 class="modal-title" ng-if="project" translate>Change project</h3>
    </div>
    <div class="modal-body">
        <table class="form-table-ct">
            <tr>
                <td class="top">
                    <label translate class="control-label" for="project-new-name">Name</label>
                </td>
                <td>
                    <a class="input-icon" ng-if="!project" popover-placement="left"
                       tabindex="0" role="button" popover-trigger="focus"
                       popover="The project name is used as the repository name when referencing images, registry/project/image:[tag]">
                       <span class="fa fa-lg fa-info-circle"></span>
                    </a>
                    <input id="project-new-name" class="form-control" type="text"
                        ng-if="!project" ng-model="fields.name" autofocus>
                    <span id="project-new-name" ng-if="project">{{ fields.name }}</span>
                </td>
            </tr>
            <tr>
                <td class="top">
                    <label class="control-label" for="project-new-display" translate>Display name</label>
                </td>
                <td>
                    <input id="project-new-display" class="form-control" type="text"
                        ng-model="fields.display">
                </td>
            </tr>
            <tr>
                <td class="top">
                    <label class="control-label" for="project-new-description" translate>Description</label>
                </td>
                <td>
                    <input id="project-new-description" class="form-control" type="text"
                        ng-model="fields.description">
                </td>
            </tr>
            <tr>
                <td>
                    <label class="control-label" for="project-access-policy"
                        translate>Access Policy</label>
                </td>
                <td>
                    <div class="btn-group bootstrap-select form-control" dropdown
                        id="project-access-policy">
                        <button class="btn btn-default dropdown-toggle" dropdown-toggle>
                            <span class="pull-left">{{ labels.access[fields.access] }}</span>
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li ng-repeat="(value, label) in labels.access"
                                ng-class="{checked: value == fields.access}">
                                <a ng-click="fields.access = value" value="{{value}}">{{ label }}</a>
                            </li>
                        </ul>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    <div class="modal-footer">
        <button class="btn btn-default btn-cancel" translate>Cancel</button>
        <button class="btn btn-primary" ng-if="!project" ng-click="complete(performCreate())"
            translate>Create</button>
        <button class="btn btn-primary" ng-if="project" ng-click="complete(performModify())"
            translate>Change</button>
    </div>
</modal-dialog>
