<modal-dialog>
    <div class="modal-header">
        <h3 class="modal-title" translate>Deploy Application</h3>
    </div>
    <div class="modal-body">
        <table class="form-table-ct">
            <tr>
                <td class="top">
                    <label class="control-label" for="deploy-app-type-label" translate>Type</label>
                </td>
                <td id="deploy-app-type-field" class="dialog-wrapper">
                    <div class="btn-group bootstrap-select deploy-type form-control" dropdown>
                        <button class="btn btn-default dropdown-toggle" type="button" dropdown-toggle>
                            <span class="pull-left">{{ selected.name }}</span>
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li ng-repeat="type in types" ng-class="{ checked: selected.name == type.name }">
                                <a ng-click="select(type)">{{type.name}}</a>
                            </li>
                        </ul>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="top">
                    <label class="control-label" for="deploy-app-file">{{ selected.name }}</label>
                </td>
                <td class="dialog-wrapper">
                    <div ng-if="selected.type == 'manifest'" file-button>
                    </div>
                    <input id="deploy-app-nulecule-image" class="form-control" type="text" placeholder="eg: docker/image"
                           ng-if="selected.type == 'nulecule'">
                </td>
            </tr>
            <tr>
                <td class="top">
                    <label ng-if="flavor == 'openshift'" class="control-label top" for="deploy-app-namespace" id="deploy-app-namespace-label">Project</label>
                    <label ng-if="flavor != 'openshift'" class="control-label top" for="deploy-app-namespace" id="deploy-app-namespace-label">Namespace</label>
                </td>
                <td>
                    <div class="input-group bootstrap-select input-combo form-control" id="deploy-app-namespace-group" dropdown>
                        <input id="deploy-app-namespace" class="form-control" type="text" placeholder="eg: myapplication" ng-model="fields.namespace">
                        <span class="input-group-btn" dropdown="">
                            <button class="btn btn-default dropdown-toggle" type="button" dropdown-toggle>
                                <span class="caret"></span>
                            </button>
                            <ul span ng-if="!namespace" class="dropdown-menu dropdown-menu-left">
                                <li ng-repeat="name in namespaces track by name" ng-class="{ checked: fields.namespace == name }">
                                    <a ng-click="fields.namespace = name">{{name}}</a>
                                </li>
                            </ul>
                        </span>
                    </div>
                </td>
            </tr>
        </table>

    </div>
    <div class="modal-footer">
        <button class="btn btn-default btn-cancel" translate>Cancel</button>
        <button class="btn btn-primary" translate ng-click="complete(performDeploy())">Deploy</button>
    </div>
</modal-dialog>
