<html>
  
      <head>
          <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>  
         
        </head>
      <body>
         
          
    <div class="upper">
        <md-toolbar>My App</md-toolbar>
    <md-toolbar flex style="background-color:white;width: 100%;" >
        
              <img src="../../assets/image/a.jpg" 
              style=
              "width:20%;padding-top: 8px;">
              
            <ul fxHide.sm="true" fxHide.xs="true" style="width:50%;padding:30px 10% 0 0;"  fxLayout="row" >
                         </ul>
              
                         <ul fxShow fxHide.xs="false" fxHide.lg="true" fxHide.gt-sm="true" style="width:100%;padding-top: 15px;"> <!--for small screen -->
                          <!--    <li  style="float:right;" >
                                 <div class="dropdown">
                                       <img src="../../assets/image/us.jpg" height=30px>
                                       <div class="dropdown-content">
                                           <b> <h4>  &nbsp;<p id="insert3"></p></h4></b>
                                           <h6><p id="insert4"></p></h6>
                                           &nbsp; <button type="reset" class="btn btn-default" >My Account</button>         
                                            &nbsp;&nbsp;  <input type="submit" class="btn btn btn-success" style="float: left;" value="Log Out" (click)="openPop()"/>
                                            
                                               
                                          </div>
                                     </div>
                            
                             </li> -->
                             <md-menu #appMenu="mdMenu" [overlapTrigger]="false">
                                <h5>&nbsp;&nbsp;{{fs}} {{ls}}</h5>
                                <h5>&nbsp;&nbsp;{{or}}</h5><br>
                                <!-- <b> <h4><p id="insert"></p></h4></b>
                                <h6><p id="insert2"></p></h6> -->
                                &nbsp; <button type="reset" class="btn btn-default" >My Account</button>                  
                                   <button class="btn btn btn-success"(click)="logout()" >&nbsp;&nbsp;&nbsp;Log Out&nbsp;&nbsp;&nbsp;</button>  &nbsp;
                              </md-menu>
                              
                              <button md-icon-button [mdMenuTriggerFor]="appMenu"  style="float:right;outline:none">
                               <!--   <md-icon>more_vert</md-icon> -->
                                 <img src="../../assets/image/us.jpg" height=30px>
                              </button>
                       </ul>
                             
                      
                   
                           <ul fxShow fxHide.xs="true" fxHide.lt-md="true" fxHide.gt-sm="false" style="float:right;width:30%; margin-top: 3%;">
                           <!--     <li style="width:27%;float:right">
                                 <div class="dropdown">
                                       <img src="../../assets/image/us.jpg" height=30px>
                                       <div class="dropdown-content">
                                           <b> <h4>  &nbsp;<p id="insert"></p></h4></b>
                                           <h6><p id="insert2"></p></h6>
                                           &nbsp; <button type="reset" class="btn btn-default" >My Account</button>                  
                                              <button class="btn btn btn-success"(click)="openPop()" >&nbsp;&nbsp;&nbsp;Log Out&nbsp;&nbsp;&nbsp;</button>  &nbsp;
                                               
                                          </div>
                                     </div>
                               </li>
                               -->
                               <md-menu #appMenu="mdMenu" [overlapTrigger]="false">
                                 <h5>&nbsp;&nbsp;{{fs}} {{ls}}</h5>
                                 <h5>&nbsp;&nbsp;{{or}}</h5><br>
                                 <!-- <b> <h4><p id="insert"></p></h4></b>
                                 <h6><p id="insert2"></p></h6> -->
                                 &nbsp; <button type="reset" class="btn btn-default" >My Account</button>                  
                                    <button class="btn btn btn-success"(click)="logout()" >&nbsp;&nbsp;&nbsp;Log Out&nbsp;&nbsp;&nbsp;</button>  &nbsp;
                               </md-menu>
                               
                               <button md-icon-button [mdMenuTriggerFor]="appMenu"  style="float:right;outline:none">
                                <!--   <md-icon>more_vert</md-icon> -->
                                  <img src="../../assets/image/us.jpg" height=30px>
                               </button>
                           
                         </ul>
                               
            
           </md-toolbar>
    </div>
    
<md-card >
    <md-card-header>
    <p style="margin-left:31px;margin-top:14px;float:left"><b>Device ID - </b>1234567890 &nbsp;&nbsp;&nbsp;&nbsp;<b>Device Name - </b>Gps</p>
    <br><br><br></md-card-header>
    
<md-tab-group>
  <md-tab label="Datamatrix">
     <br> <p><button data-tooltip="Add Device" style="border:1px solid transparent; background-color: transparent;float:left;" (click)="openDialog()">   <md-icon style="float:left;width:30px;height:30px;">add</md-icon></button></p>
    <!--  You chose: <i>{{animal}}</i> --><br>
    <!--  You chose: <i>{{animal}}</i> --><br>

    <div class="newspaper">


  <h6 *ngFor="let ls of l" >
     <h5><b><!-- &#9758; &#10132; -->   &#10140; </b>{{ ls}} </h5>
    </h6>


    </div>
  
  </md-tab>
  <md-tab label="Rule">

      <table class="table table-striped table-hover ">
          
          <thead style="background-color:#A2C523;color: white;">
            <tr>
              <th align="left">Action</th>
              <th align="left">User Info</th>
              <th align="left">Condition</th>
              <th align="left">value</th>
            </tr>
          </thead>
        
          <tbody>
      
      <!--     <tr *ngFor="let device of devices" (click)="vewdev(device.Device_Name)">
            <td>{{device.Device_ID }}</td>
              <td>{{ device.Device_Name }}</td>
              <td>{{device.type_of_device }}</td>
              <td> {{device.Device_Des}}</td>
          </tr> -->

          <tr>
                <td align="left">SMS</td>
                <td align="left">9458075558</td>
                <td align="left">Equal</td>
                <td align="left">9:00 Pm</td>
                <th align="left"> <p><button data-tooltip="Add Device" style="border:1px solid transparent; background-color: transparent;"(click)="delete()">   <md-icon>delete</md-icon></button></p>
                </th>
            </tr>  
          </tbody> 
        </table> 
        <br> <p><button data-tooltip="Add Device" style="border:1px solid transparent; background-color: transparent; position: fixed;bottom: 0;right: 0;" (click)="openDialog2()">   <md-icon style="float:left;width:30px;height:30px;">add</md-icon></button></p>
        
  </md-tab>
  <md-tab label="Scheduler">
      <expansion-panels-container>
          <expansion-panel (onCancel)='resetForm()' (onSubmit)='saveForm()'>
              <expansion-panel-title>
                  Add Scheduler
              </expansion-panel-title>
       
              <expansion-panel-description-hidden>
                  
    
              </expansion-panel-description-hidden>
       
              <expansion-panel-description-toggled>
                  Adding
              </expansion-panel-description-toggled>
       
              <expansion-panel-content style="height:30px">

                <form>
                <md-select style="margin-top:-18px;width:45%;float:left;margin-left:-31%;" name="typdev" placeholder="Select Action" [(ngModel)]="neww">
                  <md-option *ngFor="let food of foods" [value]="food.viewValue" >
                  {{ food.viewValue }}
                  </md-option>
              </md-select>
                <material-datepicker [(date)]="yourModelDate"></material-datepicker><br><br>
                <md-select style="margin-top:-18px;width:45%;float:left;margin-left:-31%;" name="typdev" placeholder="Repitation" [(ngModel)]="neww">
                    <md-option *ngFor="let foodd of foodss" [value]="foodd.viewValue" >
                    {{ foodd.viewValue }}
                    </md-option>
                </md-select>
                
                </form>
              
              </expansion-panel-content>
       
              <expansion-panel-buttons>
                  <!-- <button (click)='pancel.cancel()'>Cancel</button> -->
<!--                   <button (click)='pancel.submit()'>Submit</button>
 -->
 <input type="submit" class="btn btn btn-success" style="float:center;" value="Generate Sheduler" (click)="addContact()" />
 
</expansion-panel-buttons>
          </expansion-panel>
       
      </expansion-panels-container>
   <!--  <h6 *ngFor="let ls of l" >
      <h5><b></b>{{ ls}} </h5>
     </h6> -->

<!--      <form class="form-group"  #lgForm="ngForm" style="float:left">   
     <md-select name="typdev" placeholder="Select Action" [(ngModel)]="new">
          <md-option *ngFor="let food of foods" [value]="food.viewValue" >
          {{ food.viewValue }}
          </md-option>
      </md-select>
      <material-datepicker [(date)]="yourModelDate"></material-datepicker>
     </form> -->
      <br><table class="w3-table w3-striped">
      <tr>
        <th>Action</th>
        <th>Selected Date</th>
        <th>Selected Time</th>
        <th>Repetation</th>
      </tr>
      <tr>
        <td>SMS</td>
        <td>06/10/2017</td>
        <td>10:20 Am</td>
        <td>Daily</td>
        <td> <p><button data-tooltip="Add Device" style="border:1px solid transparent; background-color: transparent;"(click)="delete()">   <md-icon>delete</md-icon></button></p>
        </td> 
      </tr>
    </table>
 







    
  </md-tab>
  <md-tab label="Intigrate">Intigrate</md-tab>
</md-tab-group>
</md-card>


</body>