
  <div [hidden] = "!templateIdentifier" style="height:540px">
    <div class="loading" *ngIf="Load">Loading&#8230;</div>
    <div class="row">
      <div class="col-12" style="display: inherit;">
        <!-- <div style="width: 40%;">
          <p style="margin-bottom: 0px;">{{'Vehicles' | translate}}</p>
          <md-select  multiple [(ngModel)]="selectedDevices" style="padding-top: 0;width: 90%;" ngDefaultControl>
            <md-option type ="checkbox" *ngFor="let item of poiDevices; let i = index;" [value]="item.id"  (click)="change(item, i)">{{item.deviceName}}</md-option>
          </md-select> 
        </div>   -->
        <div>
          <md-form-field style="padding-top: 12px;">
            <input type="number" mdInput name="poiRadius" [(ngModel)]="poiRadius" placeholder="Radius (Meters)">
          </md-form-field> 
        </div>
        <div style="width: 30%;margin-left: 10px;">
          <span>POI Type</span>
          <select [(ngModel)]="poitype" class="form-control" name="poitype"  (change)="getpoi_type(poitype)">
            <option *ngFor="let type of poiType; let i = index;" [value]="type.value" >{{type.view}}</option>
            </select>
        </div>   
      </div>
    </div>
    <div class="row">
      <div class="col-12" style="text-align: right;margin-bottom: 10px;">
        <button class="btn btn-primary w3-button/" (click)="savepoi()">{{'Save' | translate}}</button>
        <button class="btn btn-danger w3-button/" (click)="cancel()">{{'Cancel' | translate}}</button>
      </div>
    </div>
    <div class="row"> 
      <div class="col-12">
        <div id="poiEditMap" style="padding: 0px;width: 100vh;display: flex;height: 80vh;"></div>
      </div>
    </div>
  </div> 
  <div [hidden]= "!editPOItemplate" style="height:540px">
  <div class="row" style="background: #f8f9fa;">
    <div class="col-12" style="display: inherit">
        <md-form-field  style="padding-right: 10px;margin-top: 20px;">
            <input type="text" mdInput name="text" [(ngModel)]="POINAME" placeholder="{{'POI Name' | translate}}">
          </md-form-field>
    <!-- </div> -->
    <!-- <div class="col-3"> -->
        <md-form-field  style="padding-right: 10px;margin-top: 20px;">
            <input type="text" mdInput name="text" id="txtSource"  placeholder="{{'Enter a location' | translate}}">
          </md-form-field>
      
    <!-- </div> -->
    <!-- <div class="col-2"> -->
        <md-form-field style="padding-right: 10px;margin-top: 20px;">
            <input type="number" mdInput name="poiRadius" [(ngModel)]="poiRadius" placeholder="{{'Radius (Meters)' | translate}}">
          </md-form-field>
          <div>
            <p style="margin-bottom: 0px;">POI Type</p>
            <select [(ngModel)]="poitype" class="form-control" name="poitype"  placeholder ="POI Type" style="margin-top: 5px;">
              <option *ngFor="let type of poiType; let i = index;" [value]="type.value">{{type.view}}</option>
              </select>
          </div>
        
    <!-- </div> -->
    <!-- <div class="col-2"> -->
    
    <!-- </div> -->
    <!-- <div class="col-2"> -->
    
    </div>       
  </div>
  <div class="row" style="margin-bottom: 5px;text-align: right;background: #f8f9fa;">
    <div class="col-12">
      <button class="btn btn-primary w3-button/" (click)="addPOI()" style="margin-left: 2%;width: 100px;height: 40px; margin-top: 1%;">{{'ADD' | translate}}</button>
      <button class="btn btn-danger w3-button/" (click)="cancel()" style="width: 100px;height: 40px; margin-top: 1%;">{{'Cancel' | translate}}</button>
    </div>
  </div>
  <div class="row" style="height: inherit;">
    <div class="col-12" id="poiAddMap">
        <!-- <div ></div> -->
    </div> 
  </div>
  </div>

    <div *ngIf="actionId=='MULTIPLE'" style="height:540px">
      <div class="row" style="background: #f8f9fa;">
        <div class="col-12 card" style="display: inherit">
          <div class="card-header">
            <h4>Add Multiple POI</h4>
          </div>
          <div class="card-body">
          
            <div class="row" style="margin-top: 10px;margin-bottom: 10px;">
              <div class="col-sm-12" style="text-align: left;font-size: initial;">
                <!-- <label >Choose an Excel File:</label>
                              <input  style="margin-left: 30px;" type="file" id="excelFile"  multiple size="50"> -->
                <div class="col-sm-offset-2 col-sm-10" style="text-align: center;">
                  <label style="background: MD_DIALOG_DATA;box-shadow: 2px 2px #a0a3a5;"
                    class="file-upload btn btn-primary">Browse
                    for Excel file ... <input type="file" id="excelFile" multiple size="50" />
                  </label>
                  <!-- <button type="button" style="margin-top: 0px; margin-left: 15px;; width: 90px; box-shadow: 2px 2px #b1adad"
                    class="btn btn-primary" data-toggle="collapse" data-target="#collapseZero" aria-expanded="true"
                    aria-controls="collapseZero" (click)="uploadExcel()">Upload</button> -->
                  <!-- (click)="uploadExcel()" -->
                  <!-- <a type="button" download href="https://www.oneqlik.in/BulkDeviceAdd.ods"
                            style="cursor:pointer; background: #40b516; margin-top: 0px; margin-left: 10px; border-color: #b5b4b4; box-shadow: 2px 2px #b1adad;"
                            class="btn btn-primary">Download Excel</a> -->
                </div>
              </div>
            </div>
            <!-- <div class="row" *ngIf="showErrorupload_1">
              <div class=col-sm-12>
                <table class="table table-striped table-hover " style="overflow-y: hidden; overflow-x: hidden;font-size:12px">
                  <thead>
                    <tr>
                      <th>{{'Toll Name' | translate}}</th>
                      <th>{{'Toll Tax' | translate}}</th>
                      <th>{{'Latitude' | translate}}</th>
                      <th>{{'Longitude' | translate}}</th>
                      <th>{{'Address' | translate}}</th>
                      <th>{{'Status' | translate}}</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let failedDevices of faileduploadDevices">
                      <td style="cursor:pointer">{{failedDevices.tollName}}</td>
                      <td style="cursor:pointer">{{failedDevices.tollTax}}</td>
                      <td style="cursor:pointer">{{failedDevices.lat}}</td>
                      <td style="cursor:pointer">{{failedDevices.long}}</td>
                      <td style="cursor:pointer">{{failedDevices.address}}</td>
                      <td style="cursor:pointer">{{failedDevices.status}}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div> -->
          
          </div>
          </div>
          </div>
          </div>






<!-- 
  <div class=col-sm-2 style="padding: 3% 0 0 0;">
   
  </div>
  <div class=col-sm-10 style="padding-left: 0;">
    <md-select  multiple [(ngModel)]="selectedDevices" style="width: 40%;margin-right: 2%;" ngDefaultControl>
      <md-option type ="checkbox" *ngFor="let item of poiDevices; let i = index;" [value]="item.id"  (click)="change(item, i)">{{item.deviceName}}</md-option>
    </md-select> 
    <md-form-field style="margin-left: 2%;width: 30%;">
      <input type="number" mdInput name="poiRadius" [(ngModel)]="poiRadius" placeholder="Radius (Meters)">
    </md-form-field> 
    <select [(ngModel)]="poitype" class="form-control" name="poitype"  >
      <option *ngFor="let type of poiType; let i = index;" [value]="type.value">{{type.view}}</option>
      </select>
    <button class="btn btn-primary w3-button/" (click)="savepoi()">{{'Save' | translate}}</button>
    <button class="btn btn-danger w3-button/" (click)="cancel()">{{'Cancel' | translate}}</button>
  </div> -->




<!-- 
  <div class="row" style="background: #d6d7dc3d">
    <div class="col-sm-12 col-md-6 col-lg-4">
      <span style="padding-left: 5px;">{{'Vehicles' | translate}}</span>
      <md-select  multiple [(ngModel)]="selectedDevices" style="width: 40%;margin-right: 2%;" ngDefaultControl>
        <md-option type ="checkbox" *ngFor="let item of poiDevices; let i = index;" [value]="item.id"  (click)="change(item, i)">{{item.deviceName}}</md-option>
      </md-select> 
    </div>
    <div class="col-sm-12 col-md-6 col-lg-2">
      <md-form-field style="margin-left: 2%;width: 30%;">
        <input type="number" mdInput name="poiRadius" [(ngModel)]="poiRadius" placeholder="Radius (Meters)">
      </md-form-field> 
    </div>
    <div class="col-sm-12 col-md-6 col-lg-3">
      <select [(ngModel)]="poitype" class="form-control" name="poitype"  >
        <option *ngFor="let type of poiType; let i = index;" [value]="type.value">{{type.view}}</option>
        </select>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-3">
      <button class="btn btn-primary w3-button/" (click)="savepoi()">{{'Save' | translate}}</button>
      <button class="btn btn-danger w3-button/" (click)="cancel()">{{'Cancel' | translate}}</button>
    </div> 
  </div> -->