<!-- <div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <p>CREATE TRIP</p>
    </div>
  </div>
  <div class="row">
    <md-form-field style="margin-left: 2%;">
        <input type="text" mdInput name="text" [(ngModel)]="TripName" placeholder="Trip Name">
      </md-form-field>   
    <md-form-field  style="margin-left: 2%;">
        <input type="text" mdInput name="text" id="txtSource"  placeholder="Your Location">
      </md-form-field>
      <md-form-field style="margin-left: 2%;">
        <input type="number" mdInput name="poiRadius" [(ngModel)]="poiRadius" placeholder="Radius">
      </md-form-field>
      <button md-raised-button (click)="create_trip()" style="margin-left: 2%;width: 100px;height: 40px; margin-top: 1%;">Create Trip</button>
      <button class="btn btn-danger w3-button/" (click)="cancel()" style="margin-left: 2%;width: 100px;height: 40px; margin-top: 1%;">Cancel</button>
</div>
<div class="row">
  <div class="col-12">
      <div id="poiAddMap" style="padding: 0px;width: 100%;height: 100%;"></div>
  </div>
</div>
</div> -->

<div class="container-fluid" style="padding: 0%;margin:0%;background: #ededed">
  <p style="text-align: center; font-size: 20px; font-weight: 500; padding-top: 14px; padding-bottom: 10px;">{{'CREATE TRIP' | translate}}</p>
  <div class="row" style="text-align: center;margin-bottom: 12px">
    <div class="col-4">
      <md-form-field style="margin-left: 2%;">
        <input type="text" mdInput name="text" [(ngModel)]="TripName" placeholder="{{'Trip Name' | translate}}">
      </md-form-field>
    </div>
    <div class="col-4">
        <md-form-field  style="margin-left: 2%;">
            <input type="text" mdInput name="text" id="txtSource"  placeholder="{{'Select destination' | translate}}">
          </md-form-field>
    </div>
    <div class="col-4" style="margin-top: 5px;">
        <button md-raised-button style="background: #31428c; color: white;" (click)="create_trip()" >{{'Create Trip' | translate}}</button>
        <button md-raised-button style="background: red; color: white;" (click)="this.dialogRef.close()" >{{'Cancel' | translate}}</button>
    </div>
  </div>
  <div class="row">
    <div class="col-12" style="padding-left: 50px; font-weight: 500; color: #7d1e1e;">
      <p style="margin-bottom: 0%">Total Distance: <span id="total"></span></p>
    </div>
  </div>

  <div id="poiAddMap" style="width: 100% ; height:400px"></div>

</div>