<div class="modal-header">
    <h3 class="modal-title" translate>{{ctrl.page.name}} information</h3>
</div>
<form class="form EditorHeader-editMetadata" name="editMetadata" novalidate>
    <div class="modal-body" id="modal-edit-metadata">
        <h4 translate>Metadata</h4>
        <div class="form-group">
            <label class="control-label" for="page-displayName" translate>Display name</label>
            <i class="fa fa-info-circle" uib-tooltip="{{'Used in the portal list of Resources. Part of the page.properties descriptor in the exported page archive. If empty, page technical name is used as fallback.' | translate}}" tooltip-placement="right"></i>
            <input
                name="displayName"
                ng-model="ctrl.displayName"
                class="form-control"
                id="page-displayName"
                placeholder="{{ 'Page display name' | translate }}"
                maxlength="255"/>
        </div>
        <div class="form-group">
            <label for="page-description" translate>Description</label>
            <i class="fa fa-info-circle" uib-tooltip="{{'Used in the portal list of Resources. Part of the page.properties descriptor in the exported page archive.' | translate}}" tooltip-placement="right"></i>
            <textarea
                name="description"
                ng-model="ctrl.description"
                class="form-control"
                id="page-description"
                placeholder="{{ 'Page description' | translate }}"/>
        </div>
        <br/>
        <h4>
            <i class="fa fa-lock fa-lg"></i>
            <translate>Bonita resources</translate>
            <i class="fa fa-info-circle" uib-tooltip="{{'Summary of the Bonita REST API calls made by the page.' | translate}}" tooltip-placement="right"></i>
        </h4>
        <div class="form-group">
            <ul>
                <li ng-repeat=" resource in ctrl.resources track by $index">
                    {{resource }}
                </li>
                <li ng-show="!ctrl.resources.length" translate>No Bonita REST API calls.</li>
            </ul>
            </p>
        </div>
    </div>
    <div class="modal-footer" id="modal-export-page-controls">
        <button class="btn btn-primary" ng-click="ctrl.save(editMetadata)" name="save" ng-disabled="editMetadata.$invalid" translate>Save</button>
        <button class="btn btn-link" ng-click="$dismiss('cancel')" name="cancel" translate>Cancel</button>
    </div>
</form>
