<md-dialog ng-init="init()" aria-label="Ground Station Dialog">

    <md-toolbar class="md-theme-light">
        <h2 class="md-toolbar-tools">
            <span ng-show="!uiCtrl.isEditing">Add new Ground Station</span>
            <span ng-show="uiCtrl.isEditing">Edit Ground Station</span>
        </h2>
    </md-toolbar>

    <md-content class="add-gs-dialog menu-list">

        <div>
            <style>
                .leaflet-control-container {
                    display: none;
                }
            </style>
            <leaflet id="addGsMap" class="sn-select-gs-map" center="center" event-broadcast="events" markers="markers"></leaflet>
        </div>

        <form name="gsCfg">

            <div layout="row">
                <md-input-container style="width: 40%">
                    <label>Identifier</label>
                    <input name="identifier" ng-remote-validate="/configuration/groundstations/valid_id" ng-remote-throttle="200" ng-remote-method="GET" ng-disabled="uiCtrl.isEditing" ng-pattern="/^[a-zA-Z0-9.\-_]{5,8}$/" ng-model="configuration.identifier" required>
                </md-input-container>
                <md-input-container style="width: 30%">
                    <label>Callsign</label>
                    <input name="callsign" ng-pattern="/^[a-zA-Z0-9]{3,8}$/" ng-model="configuration.callsign" required>
                </md-input-container>
                <md-input-container style="width: 30%">
                    <label>Contact (degrees)</label>
                    <input name="elevation" required type="number" step="0.1" min="0" max="90" ng-model="configuration.elevation">
                </md-input-container>
            </div>

            <div layout="row">
                <md-input-container style="width: 50%">
                    <label>Latitude</label>
                    <input name="latitude" required type="number" ng-model="markers.gs.lat">
                </md-input-container>
                <md-input-container style="width: 50%">
                    <label>Longitude</label>
                    <input name="longitude" required type="number" ng-model="markers.gs.lng">
                </md-input-container>
            </div>

        </form>

        <div layout="row">

            <md-button id="add" ng-show="!uiCtrl.isEditing" ng-click="add()" ng-disabled="gsCfg.$pristine || gsCfg.$invalid" aria-label="Add Ground Station" class="md-primary menu-button">
                <div layout="row">
                    <i class="fa fa-plus"></i>
                    <b>add</b>
                </div>
            </md-button>

            <md-button id="edit" ng-show="uiCtrl.isEditing" ng-click="update()" ng-disabled="gsCfg.$pristine || gsCfg.$invalid" aria-label="Edit Ground Station" class="md-primary menu-button">
                <div layout="row">
                    <i class="fa fa-floppy-o"></i>
                    <b>save</b>
                </div>
            </md-button>

            <md-button id="cancel" ng-click="cancel()" aria-label="Cancel" class="md-primary menu-button">
                <div layout="row">
                    <i class="fa fa-reply"></i>
                    <b>cancel</b>
                </div>
            </md-button>

        </div>

    </md-content>
</md-dialog>