<div style="width:100%;height:100%;padding-top: 6%;">
  <h1 style="font-size: 1.4rem;text-align: center;color: #5a5757;">{{'Add POI details' | translate}}</h1>
  <table class="table table-striped table-hover" style="overflow-y: hidden;overflow-x: hidden;font-size:12px">
    <thead>
    </thead>
    <tbody>
      <tr>
        <td style="cursor:pointer">
            <div class="row">
              <div class="col-sm-3">
                {{'POI name' | translate}} :
              </div>
              <div class="col-sm-7">
                <input id="myInput" type="text" style="padding-left: 6px;width: 215px;border-radius: 5px;" [(ngModel)]="poiName" placeholder="{{'Type POI name' | translate}}"
                />
              </div>
            </div>
            <div class="row" style="padding-top:8px;">
              <div class="col-sm-3">
                <span>{{'Previous point duration' | translate}}</span>
              </div>
              <div class="col-sm-2">
              {{'Days' | translate}} : 
                  <input style="width: 55px;border-radius: 6px;padding-left: 5px;" id="myInput" type="number" [(ngModel)]="preDays" placeholder="{{'Days' | translate}}" />
              
              </div>
              <div class="col-sm-2">
              {{'Hours' | translate}} : 
                  <input style="width: 55px;border-radius: 6px;padding-left: 5px;" id="myInput" type="number" [(ngModel)]="preHours" placeholder="Hours" />         
              </div>
              <div class="col-sm-2" style="padding: 0px;padding-left: 24px;">
               {{'Minutes' | translate}} : 
                  <input style="width: 55px;border-radius: 6px;padding-left: 5px;" id="myInput" type="number" [(ngModel)]="preMin" placeholder="Min" />           
              </div>
            </div>
            <div class="row" style="padding-top:8px;">
              <div class="col-sm-3">
                <span>{{'Next point duration' | translate}} </span>
              </div>
              <div class="col-sm-2">
             {{'Days' | translate}} : 
                  <input style="width: 55px;border-radius: 6px;padding-left: 5px;" id="myInput" type="number" [(ngModel)]="nextDays" placeholder="{{'Days' | translate}}" />  
              </div>
              <div class="col-sm-2">
             {{'Hours' | translate}} :
                  <input style="width: 55px;border-radius: 6px;padding-left: 5px;" id="myInput" type="number" [(ngModel)]="nextHours" placeholder="{{'Hours' | translate}}" />    
              </div>
              <div class="col-sm-2" style="padding: 0px;padding-left: 24px;">
             {{'Minutes' | translate}} :
                  <input style="width: 55px;border-radius: 6px;padding-left: 5px;" id="myInput" type="number" [(ngModel)]="nextMin" placeholder="{{'Min' | translate}}" />
              
              </div>
            </div>
            <div class="row" style="padding-top:8px;">
              <div class="col-sm-3">
                <span>{{'Halt' | translate}} :  </span>
              </div>
              <div class="col-sm-2">
                  {{'Days' | translate}} :
                  <input style="width: 55px;border-radius: 6px;padding-left: 5px;" id="myInput" type="number" [(ngModel)]="haltDays" placeholder="Days" />
             
              </div>
              <div class="col-sm-2">
                  {{'Hours' | translate}} :
                  <input style="width: 55px;border-radius: 6px;padding-left: 5px;" id="myInput" type="number" [(ngModel)]="haltHours" placeholder="Hours" />
              
              </div>
              <div class="col-sm-2" style="padding: 0px;padding-left: 24px;">
                  {{'Minutes' | translate}} :
                  <input style="width: 55px;border-radius: 6px;padding-left: 5px;" id="myInput" type="number" [(ngModel)]="haltMin" placeholder="Min" />        
              </div>
            </div>
            <button style="margin-left: 50%;margin-top: 10px;width: 100px;letter-spacing: 2px;" class="btn btn-primary btn-block/" (click)="updateDetails()">{{'SAVE' | translate}}</button>
        </td>
      </tr>
    </tbody>
  </table>
</div>