<table class="slds-table slds-grid slds-grid_vertical-align-start slds-gutters slds-box">
     <thead>
                <div class="slds-grid"><div class="slds-size_2-of-30"></div>
                 <div class="slds-size_2-of-30">
                 <div class="slds-col">
                 <p class="subheading mobile-subhead">Purpose</p></div>
                  <div class="slds-size_2-of-30"></div></div>
                  <tr class="slds-text-title_caps">
                 <th scope="col" class="slds-cell-wrap">
             </th>
            </tr>
             </div>
       </thead>
    <tbody>
              <tr class="mobile-view-tr1">
    <ui:inputRadio aura:id="Oppty" label="" name="Role" value="{!v.bookingDetails.Opportunity__c}" />Issue With
    <ui:inputRadio aura:id="Case" label="" name="Role" value="{!!v.bookingDetails.Case__c}"/>Intersted in
     </tr>

        <div class="heading"><label class="mobile-view-tr1">{!$Label.c.Appointment_Scheduler_Reason}</label></div>
                       <td class="required-field mobile-view-tr1" >
        <span class="mobile-view-star" style="color:red; ">*</span><ui:inputSelect aura:id="reason" label="" value="{!v.bookingDetails.Reason__c}" required="true"/>
    </td>



</tbody>
    </table>
        <table class="slds-table slds-grid_vertical-align-start slds-table_bordered slds-box ">
        <thead>
                <div class="slds-grid"><div class="slds-size_2-of-30"></div>
                 <div class="slds-size_2-of-30">
                 <div class="slds-col">
                 <p class="subheading mobile-subhead">Personla Information </p></div>
                  <div class="slds-size_2-of-30"></div></div>
                  <tr class="slds-text-title_caps">
                 <th scope="col" class="slds-cell-wrap">
             </th>
        </tr>
  </div>
</thead>
        <tr class="mobile-view-tr1">
            <td style="" class="heading mobile-view-preferredname"><label>{!$Label.c.Appointment_Scheduler_Name} </label></td>
            <!--<td  class="mobile-view-td2" >-->
            <td class="required-field">
                <span style="color:red; ">*</span> <ui:inputText class="inputContact-fields" aura:id="name" label="" value="{!v.bookingDetails.Appointment_Scheduler_Name__c}" required="true"  />
            </td>
        </tr>
            <tr>
            <td  class="heading mobile-view-email"><label class="mobile-view-email">{!$Label.c.Appointment_Scheduler_Email}</label></td>
            <td class="required-field mobile-view-email"><span style="color:red; ">*</span><ui:inputEmail  class="inputContact-fields" aura:id="email" label="" value="{!v.bookingDetails.email}" required="true" />
            </td>
            </tr>
        <tr>
            <td class="heading mobile-view-phone"><label>{!$Label.c.Appointment_Scheduler_Phone}</label></td>
            <td class="required-field mobile-view-phone"><span style="color:red; ">*</span><ui:inputPhone aura:id="phone" class="inputContact-fields" label="" value="{!v.bookingDetails.Appointment_Scheduler_Phone__c}"  required="true"/>
            </td>
        </tr>

 </table>
            <tr  class="mobile-view-bottom" >
            <td colspan="2"><center style="">
            <lightning:button label="{!$Label.c.Appointment_Scheduler_Next}" onclick="{!c.goNext}" class="nxt-butn slds-button slds-button_neutral commandButton" />
            </center></td>
        </tr>
         </table>
            </form>
                </aura:component>