MVR - Training Detail | Upcoming

Short page description

        
          <header>
        <a class="sr-only sr-only-focusable" href="#mainContent">Skip navigation to main content</a>  <nav class="navbar navbar-expand-lg atp-navbar" aria-label="Main">
          <div class="container">
        
            <div class="row no-gutters w-100 mb-lg-2">
        
              <div class="col d-flex align-items-center">
        
                <button class="navbar-toggler mr-2 px-1" type="button" data-toggle="collapse" data-target="#atpNavbarContent" aria-controls="atpNavbarContent" aria-expanded="false" aria-label="Toggle navigation">
                  <i class="lmp-icon icon-lg" aria-hidden="true">menu</i>
                </button>
        
                <a class="navbar-brand d-none d-lg-inline-block" href="#">
                  Aviation Training Portal
                </a>
        
                <div class="navbar-title d-lg-none">
                  Products &amp; Services
                </div>
        
              </div>
        
              <div class="col-auto">
        
                <ul class="navbar-nav navbar-icon-nav justify-content-end">
                  <li class="nav-item d-none d-sm-block">
                    <a class="nav-link" href="#">
                      <i class="lmp-icon icon-lg" aria-hidden="true">help_outline</i>
                      <span class="sr-only">Help Center</span>
                    </a>
                  </li>
                  <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <i class="lmp-icon icon-lg" aria-hidden="true">apps</i>
                      <span class="sr-only">Applications Menu</span>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right atp-nav-dropdown" aria-labelledby="navbarDropdown">
                      <h6 class="dropdown-header">Portal</h6>
                      <a class="dropdown-item" href="#">MyBoeingFleet</a>
                      <div class="dropdown-divider"></div>
                      <h6 class="dropdown-header">Applications</h6>
                      <a class="dropdown-item" href="#">Application 1</a>
                      <a class="dropdown-item" href="#">Application 2</a>
                      <a class="dropdown-item" href="#">Application 3</a>
                      <a class="dropdown-item" href="#">More Applications</a>
                    </div>
                  </li>
                  <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="accountMenuDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <i class="lmp-icon icon-lg" aria-hidden="true">account_circle</i>
                      <span class="sr-only">Account Menu</span>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right atp-nav-dropdown pb-0" aria-labelledby="accountMenuDropdown">
                      <div class="h5 font-weight-bold mb-1 px-4">FirstName LastName</div>
                      <div class="dropdown-small-text">firstname.lastname@company.com</div>
                      <div class="dropdown-divider"></div>
                      <a class="dropdown-item" href="#">MBF Account Details</a>
                      <a href="#" class="dropdown-item dropdown-btn mt-4">Log Out</a>
                    </div>
                  </li>
                </ul>
        
              </div>
        
            </div>
        
            <div class="collapse navbar-collapse" id="atpNavbarContent">
        
              <div class="row d-lg-none pt-lg-1">
                <div class="col py-3 pl-4">
                  <img src="../../../../assets/images/boeing-logo.svg" width="145" height="34" alt="Boeing" loading="lazy" style="width: 150px; display: block; height: auto;">
                </div>
                <div class="col-auto py-3 pr-2">
                  <button class="navbar-toggler text-dark" type="button" data-toggle="collapse" data-target="#atpNavbarContent" aria-controls="atpNavbarContent" aria-expanded="false" aria-label="Close navigation">
                    <i class="lmp-icon icon-lg" aria-hidden="true">close</i>
                  </button>
                </div>
                <div class="col-12 border-top border-bottom py-1 px-3">
                  <a class="navbar-brand-mobile" href="#">Aviation Training Portal</a>
                </div>
              </div>
        
              <div class="row no-gutters">
                <div class="col-12">
        
                  <ul class="navbar-nav navbar-link-nav">
                    <li class="nav-item active">
                      <a class="nav-link" href="#">Products &amp; Services</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Materials</a>
                    </li>
                    <li class="nav-item d-sm-none border-top mt-1 pt-2">
                      <a href="#" class="nav-link d-flex align-items-center">
                        <i class="lmp-icon mr-2" aria-hidden="true">help_outline</i> Help Center
                      </a>
                    </li>
                  </ul>
        
                </div>
              </div>
        
            </div>
        
          </div>
        </nav>
      </header>
      
      <main id="mainContent" class="bg-gray-lt">
      
        <div class="atp-header">
          <div class="container">
            <div class="row">
              <div class="col d-flex align-items-start order-1 order-md-0">
        
                <h1 class="order-1">
                  Training Details 
                </h1>
        
                <a href="#" class="btn lmp-link atp-header-back-link order-0">
                  <i class="lmp-icon icon-md" aria-hidden="true">arrow_back</i>
                  <span class="sr-only">Navigate to previous page</span>        
                </a>
        
              </div>
            </div>
          </div>
        </div>
      
        <div class="container lmp-page-content">
      
          <div class="row py-md-3 py-lg-4 px-lg-2 bg-md-gray-md rounded">
      
            <div class="col-lg-9 mb-4 mb-lg-0">
      
               <div class="lmp-card-detail">
                <div class="row no-gutters">
              
                  <div class="col card-details">
              
                    <div class="p-3 pt-md-4">
                      <ul class="lmp-tag-list active">
                        <li>Upcoming</li>
                        <li>Flight Training</li>
                      </ul>
                      <h2>(787) Air Canada Type Rating with LOFT, CAT II/III</h2>
                      <ul class="lmp-inline-bullet">
                        <li>Type Rating</li>
                        <li>787 - 8/9/10</li>
                        <li>Product # 100178895</li>
                        <li>TP ID # 1234567</li>
                      </ul>
                    </div>
                    <ul class="lmp-outlined">
                      <li>Miami</li>
                      <li>27 Oct 2020 - 11 Nov 2020</li>
                    </ul>
              
                  </div>
              
                </div>
              </div>
      
              <div class="row no-gutters d-lg-none">
                <div class="col-12 col-md-4 pr-md-1 mb-3">
                  <a href="#" class="btn lmp-primary btn-block" data-toggle="modal" data-target="#upcomingSendMessageModal">Send a Message to Boeing</a>
                </div>
                <div class="col-6 col-md-4 pr-1 pl-md-1 mb-4">
                  <a href="#" class="btn lmp-secondary btn-block" data-toggle="modal" data-target="#upcomingModifyBookingModal">Modify Booking</a>
                </div>
                <div class="col-6 col-md-4 pl-1 mb-4">
                  <a href="#" class="btn lmp-secondary btn-block" data-toggle="modal" data-target="#upcomingCancelBookingModal">Cancel Booking</a>
                </div>
              </div>
      
              <div class="lmp-card-single">
                <h3 class="card-title">Participants</h3>
                <div class="card-val">1</div>
              </div>
       <div class="lmp-card-collapse">
        <h3 id="descriptionCardCardHeading" class="mb-0">
          <button class="card-trigger" type="button" data-toggle="collapse" data-target="#descriptionCard" aria-expanded="true" aria-controls="descriptionCard">
            <span class="card-label">Description</span>
          </button>
        </h3>
        <div id="descriptionCard" class="card-collapse collapse show" aria-labelledby="descriptionCardCardHeading">
              <div class="lmp-card-content p-4">
                <p>The Shortened Type Rating (STAR) Course saves an airline time and money by offering an effective solution tailored to pilots who have a minimum amount of glass flight deck experience. The Shortened Type Rating (STAR) Course includes ground and flight training delivered by highly qualified instructors who have gone through a rigorous certification process to ensure the highest caliber of instruction. Courseware is provided by the customer. The ground training portion of the course focuses on learning and applying systems knowledge through procedural training in a fixed training device or flat panel trainer. The flight training portion if the course takes place in a full-time simulator and simulator and includes an end-of-course check ride.</p>
                <h4>Student Receives</h4>
                <p>Type Rating</p>
              </div>
        </div>
       </div>
       <div class="lmp-card-collapse">
        <h3 id="addonsCardCardHeading" class="mb-0">
          <button class="card-trigger" type="button" data-toggle="collapse" data-target="#addonsCard" aria-expanded="true" aria-controls="addonsCard">
            <span class="card-label">Specialty Course Add-Ons</span>
          </button>
        </h3>
        <div id="addonsCard" class="card-collapse collapse show" aria-labelledby="addonsCardCardHeading">
              <div class="lmp-card-content p-4">
                <div class="row">
                  <div class="col-lg-6">
                    <h4>Selected Options</h4>
                    <ul class="lmp-lined-list">
                      <li>EFB (Product #123456)</li>
                      <li>ETOPS (Product #123456)</li>
                    </ul>
                  </div>
                </div>
              </div>
        </div>
       </div>
            </div>
      
            <div class="col-lg-3 lmp-siderail">
      
              <a href="#" class="btn lmp-primary mb-2 d-none d-lg-block" data-toggle="modal" data-target="#upcomingSendMessageModal">Send a Message to Boeing</a>
      
              <a href="#" class="btn lmp-secondary mb-2 d-none d-lg-block" data-toggle="modal" data-target="#upcomingModifyBookingModal">Modify Booking</a>
      
              <a href="#" class="btn lmp-secondary mb-4 mb-lg-5 d-none d-lg-block" data-toggle="modal" data-target="#upcomingCancelBookingModal">Cancel Booking</a>
      
              <h4>Reference Materials</h4>
              <ul class="lmp-lined-list">
                <li><a href="#"><i class="lmp-icon" aria-hidden="true">get_app</i> Training Program Schedule</a></li>
              </ul>
      
              <h4>Campus Information</h4>
              <ul class="lmp-lined-list">
                <li><a href="#"><i class="lmp-icon" aria-hidden="true">open_in_new</i> Location Detals &amp; Guides</a></li>
              </ul>
      
            </div>
      
          </div>
      
        </div>
      
      </main>
      
      <footer class="atp-foooter">
        <div class="container">
          <div class="row">
            <div class="col-lg-7">
              <nav class="atp-footer-links" aria-label="Footer">
                <a href="#">MBF Home</a>
                <a href="#">Contact Us</a>
                <a href="#">Terms of Use</a>
                <a href="#">Boeing Privacy &amp; Cookie Statement</a>
              </nav>
            </div>
            <div class="col-lg-5 text-center text-lg-right">
              Copyright &copy; 2020 Boeing. All right reserved.
            </div>
          </div>
        </div>
      </footer>
      
      <div class="lmp-modal modal fade" id="upcomingSendMessageModal" tabindex="-1" aria-labelledby="upcomingSendMessageModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <h3 class="modal-title" id="upcomingSendMessageModalLabel">Send Message to Boeing</h3>
            </div>
            <div class="modal-body">
        <table class="table lmp-table table-stack mb-2">
          <thead>
            <tr>
              <th scope="col">TP ID</th>
              <th scope="col">Name</th>
              <th scope="col">Location</th>
              <th scope="col">Date</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row" data-title="TP ID">1234567</th>
              <td data-title="Name">(787) WestJet Type Rating with LOFT, CAT II/III</td>
              <td data-title="Location">Buenos Aires</td>
              <td data-title="Date">DD Mon YYYY - DD Mon YYYY</td>
            </tr>
          </tbody>
        </table>
      
        <div class="mb-5 lmp-text-sm">
          Specialty Course Add-Ons Selected: EFB (Product #123456); ETOPS (Product #123456)
        </div>
      
        <h4>Message Details</h4>
      
        <div class="lmp-form">
        
          <div class="mb-3">
            <div class="animated-input">
              <div class="form-group">
                <input type="" class="form-control" id="upcomingsendmessage-subject">
                <label for="upcomingsendmessage-subject">Subject</label>
              </div>  
            </div>
          </div>
        
          <div class="mb-3">
            <div class="animated-input">
              <div class="form-group">
                <textarea class="form-control" id="upcomingsendmessage-message" rows="4"></textarea>
                <label for="upcomingsendmessage-message">Message</label>
                
                
                
              </div>  
            </div>
          </div>
        
          <div class="row mb-3">
            <div class="col-lg-6">
      
              <h4>Your Information</h4>
            
              <ul class="list-unstyled font-size-sm">
                <li class="my-1">Karen Smith</li>
                <li class="my-1 collapse send-message-collapse no-transition show" id="sendMsgUserEmailRow"><span id="sendMsgUserCurrentAddress">karen.smith@westjet.ca</span> <a href="#" role="button" data-toggle="collapse" data-target=".send-message-collapse" aria-expanded="false" aria-controls="sendMsgUserEmailRow sendMsgUserEmailEdit">Edit</a></li>
                <li class="collapse send-message-collapse no-transition" id="sendMsgUserEmailEdit">
                  <div class="my-3">
                    <div class="animated-input">
                      <div class="form-group">
                        <input type="" class="form-control" id="upcomingsendmessage-useremailedit-input" required value="karen.smith@westjet.ca">
                        <label for="upcomingsendmessage-useremailedit-input">Email</label>
                      </div>  
                    </div>
                  </div>
                </li>
                <li>
                  <div class="my-3">
                    <div class="form-group">
                      <label for="upcomingsendmessage-phonenumber">Phone Number (Optional)</label>
                      <input id="upcomingsendmessage-phonenumber" class="" type="tel" placeholder="Phone Number (Optional)">
                      <div id="upcomingsendmessage-error" class="iti-invalid-feedback">Please enter a valid phone number.</div>
                    </div>
                  </div>
                </li>
              </ul>
      
              <a href="#sendMsgAltContactInfo" id="altContactTrigger" class="lmp-toggle-hide font-size-sm collapsed" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="sendMsgAltContactInfo"><i class="lmp-icon" aria-hidden="true">add_circle</i> Add Alternate Contact</a>
      
            </div>
            <div class="col-12">
      
              <div class="collapse no-transition" id="sendMsgAltContactInfo">
                <h4>Alternative Contact(s)</h4>
                <div class="animated-input">
                  <div class="form-group">
                    <input type="" class="form-control is-invalid" id="upcomingformInput-sendmessage-altContacts" aria-describedby="inputHelp-upcomingformInput-sendmessage-altContacts" required>
                    <label for="upcomingformInput-sendmessage-altContacts">Email Address(es)</label>
                    <div class="invalid-feedback">Please enter valid email address(es) separated by a semicolon.</div>
                    <span id="inputHelp-upcomingformInput-sendmessage-altContacts" class="form-text">Add additional emails, separated by a semicolon. These will be CC&#x27;d on communications around this message.</span>
                  </div>  
                </div>
              </div>
      
            </div>
          </div>
        </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn lmp-outline-secondary mr-2" data-dismiss="modal" aria-label="Close">Cancel</button>
              <button class="btn lmp-secondary" data-dismiss="modal" data-toggle="modal" data-target="#messageSubmitModal">Submit</button>
            </div>
          </div>
        </div>
      </div>
      
      <div class="lmp-modal modal fade" id="upcomingModifyBookingModal" tabindex="-1" aria-labelledby="upcomingModifyBookingModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <h3 class="modal-title" id="upcomingModifyBookingModalLabel">Modify Booking</h3>
            </div>
            <div class="modal-body">
        <table class="table lmp-table table-stack mb-2">
          <thead>
            <tr>
              <th scope="col">TP ID</th>
              <th scope="col">Name</th>
              <th scope="col">Location</th>
              <th scope="col">Date</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row" data-title="TP ID">1234567</th>
              <td data-title="Name">(787) Air Canada Type Rating with LOFT, CAT II/III</td>
              <td data-title="Location">Miami</td>
              <td data-title="Date">27 Oct 2020 - 11 Nov 2020</td>
            </tr>
          </tbody>
        </table>
      
        <div class="mb-4 lmp-text-sm">
          Specialty Course Add-Ons Selected: EFB (Product #123456); ETOPS (Product #123456)
        </div>
      
        <h4>Modification Details</h4>
      
        <div class="lmp-form">
      
          <div class="mb-3"><div class="animated-input">
        <div class="form-group">
          <select class="form-control custom-select" id="formSelect-upcomingmodifybooking-modificationtype" required>
            <option></option>
            <option value="Select item1">Select Item 1</option>
            <option value="Select item2">Select Item 2</option>
            <option value="Select item3">Select Item 3</option>
          </select>
          <label for="formSelect-upcomingmodifybooking-modificationtype">Modification Type</label>
          
          
          
        </div>
      </div>
      </div>
      
          <div class="mb-3"><div class="animated-input">
        <div class="form-group">
          <textarea class="form-control" id="upcomingmodifybooking-modificationdetails" rows="4" aria-describedby="textareaHelp-upcomingmodifybooking-modificationdetails"></textarea>
          <label for="upcomingmodifybooking-modificationdetails">Modification Details</label>
          <span id="upcomingmodifybooking-modificationdetails-inputHelp" class="form-text">Please describe how you would like the booking modified.</span>
          
          
        </div>  
      </div>
      </div>
      
          <div class="row">
            <div class="col-lg-6 mb-3">
      
              <h4>Your Information</h4>
            
              <ul class="list-unstyled font-size-sm">
                <li class="my-1">Karen Smith</li>
                <li class="my-1 collapse modify-booking-collapse no-transition show" id="modifyBookingUserEmailRow"><span id="modifyBookingUserCurrentAddress">karen.smith@westjet.ca</span> <a href="#" role="button" data-toggle="collapse" data-target=".modify-booking-collapse" aria-expanded="false" aria-controls="modifyBookingUserEmailRow modifyBookingUserEmailEdit">Edit</a></li>
                <li class="collapse modify-booking-collapse no-transition" id="modifyBookingUserEmailEdit">
                  <div class="my-3">
                    <div class="animated-input">
                      <div class="form-group">
                        <input type="" class="form-control" id="upcomingmodifybooking-useremail-id" required value="karen.smith@westjet.ca">
                        <label for="upcomingmodifybooking-useremail-id">Email</label>
                      </div>  
                    </div>
                  </div>
                </li>
                <li>
                  <div class="my-3">
                    <div class="form-group">
                      <label for="upcomingmodifybooking-phonenumber">Phone Number (Optional)</label>
                      <input id="upcomingmodifybooking-phonenumber" class="" type="tel" placeholder="Phone Number (Optional)">
                      <div id="upcomingmodifybooking-error" class="iti-invalid-feedback">Please enter a valid phone number.</div>
                    </div>
                  </div>
                </li>
              </ul>
      
              <a href="#modifyBookingAltContactInfo" id="altContactTrigger" class="lmp-toggle-hide font-size-sm collapsed" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="modifyBookingAltContactInfo"><i class="lmp-icon" aria-hidden="true">add_circle</i> Add Alternate Contact</a>
          
            </div>
      
            <div class="col-12">
      
              <div class="collapse no-transition" id="modifyBookingAltContactInfo">
                <div class="mb-3">
                  <h4>Alternative Contact(s)</h4>
                  <div class="animated-input">
                    <div class="form-group">
                      <input type="" class="form-control is-invalid" id="upcomingmodifybookingformInput-altContacts" aria-describedby="inputHelp-upcomingmodifybookingformInput-altContacts" required>
                      <label for="upcomingmodifybookingformInput-altContacts">Email Address(es)</label>
                      <div class="invalid-feedback">Please enter valid email address(es) separated by a semicolon.</div>
                      <span id="inputHelp-upcomingmodifybookingformInput-altContacts" class="form-text">Add additional emails, separated by a semicolon. These will be CC&#x27;d on communications around this message.</span>
                    </div>  
                  </div>
                </div>
              </div>
      
              <div class="form-check">
              </div>
      
            </div>
      
          </div>
        </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn lmp-outline-secondary mr-2" data-dismiss="modal" aria-label="Close">Discard Request</button>
              <button class="btn lmp-secondary">Submit Modification</button>
            </div>
          </div>
        </div>
      </div>
      
      <div class="lmp-modal modal fade" id="upcomingCancelBookingModal" tabindex="-1" aria-labelledby="upcomingCancelBookingModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <h3 class="modal-title" id="upcomingCancelBookingModalLabel">Cancel Booking</h3>
            </div>
            <div class="modal-body">
        <table class="table lmp-table table-stack mb-2">
          <thead>
            <tr>
              <th scope="col">TP ID</th>
              <th scope="col">Name</th>
              <th scope="col">Location</th>
              <th scope="col">Date</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row" data-title="TP ID">1234567</th>
              <td data-title="Name">(787) Air Canada Type Rating with LOFT, CAT II/III</td>
              <td data-title="Location">Miami</td>
              <td data-title="Date">27 Oct 2020 - 11 Nov 2020</td>
            </tr>
          </tbody>
        </table>
      
        <div class="mb-4 lmp-text-sm">
          Specialty Course Add-Ons Selected: EFB (Product #123456); ETOPS (Product #123456)
        </div>
      
        <h4>Cancellation Details</h4>
      
        <div class="lmp-form">
      
          <div class="mb-4"><div class="animated-input">
        <div class="form-group">
          <select class="form-control custom-select" id="formSelect-cancellationReason" required>
            <option></option>
            <option value="CancelReason1">Cancel Reason 1</option>
            <option value="CancelReason2">Cancel Reason 2</option>
            <option value="CancelReason3">Cancel Reason 3</option>
          </select>
          <label for="formSelect-cancellationReason">Reason for Cancellation</label>
          
          
          
        </div>
      </div>
      </div>
      
          <div class="row">
            <div class="col-lg-6 mb-3">
      
              <h4>Your Information</h4>
            
              <ul class="list-unstyled font-size-sm">
                <li class="my-1">Karen Smith</li>
                <li class="my-1 collapse cancel-booking-collapse no-transition show" id="cancelBookingUserEmailRow"><span id="cancelBookingUserCurrentAddress">karen.smith@westjet.ca</span> <a href="#" role="button" data-toggle="collapse" data-target=".cancel-booking-collapse" aria-expanded="false" aria-controls="cancelBookingUserEmailRow cancelBookingUserEmailEdit">Edit</a></li>
                <li class="collapse cancel-booking-collapse no-transition" id="cancelBookingUserEmailEdit">
                  <div class="my-3">
                    <div class="animated-input">
                      <div class="form-group">
                        <input type="" class="form-control" id="upcomingcancelbooking-useremailedit-input" required value="karen.smith@westjet.ca">
                        <label for="upcomingcancelbooking-useremailedit-input">Email</label>
                      </div>  
                    </div>
                  </div>
                </li>
                <li>
                  <div class="my-3">
                    <div class="form-group">
                      <label for="upcomingcancelbooking-phonenumber">Phone Number (Optional)</label>
                      <input id="upcomingcancelbooking-phonenumber" class="" type="tel" placeholder="Phone Number (Optional)">
                      <div id="upcomingcancelbooking-error" class="iti-invalid-feedback">Please enter a valid phone number.</div>
                    </div>
                  </div>
                </li>
              </ul>
      
              <a href="#cancelBookingAltContactInfo" id="altContactTrigger" class="lmp-toggle-hide font-size-sm collapsed" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="cancelBookingAltContactInfo"><i class="lmp-icon" aria-hidden="true">add_circle</i> Add Alternate Contact</a>
          
            </div>
            <div class="col-12">
      
              <div class="collapse no-transition" id="cancelBookingAltContactInfo">
                <div class="mb-3">
                  <h4>Alternative Contact(s)</h4>
                  <div class="animated-input">
                    <div class="form-group">
                      <input type="" class="form-control is-invalid" id="upcomingcancelbookingformInput-altContacts" aria-describedby="inputHelp-upcomingcancelbookingformInput-altContacts" required>
                      <label for="upcomingcancelbookingformInput-altContacts">Email Address(es)</label>
                      <div class="invalid-feedback">Please enter valid email address(es) separated by a semicolon.</div>
                      <span id="inputHelp-upcomingcancelbookingformInput-altContacts" class="form-text">Add additional emails, separated by a semicolon. These will be CC&#x27;d on communications around this message.</span>
                    </div>  
                  </div>
                </div>
              </div>
      
              <div class="form-check">
              </div>
      
            </div>
          </div>
      
        </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn lmp-outline-secondary mr-2" data-dismiss="modal" aria-label="Close">Discard Request</button>
              <button class="btn lmp-secondary" data-dismiss="modal" data-toggle="modal" data-target="#upcomingCancelSubmitModal">Submit Cancellation</button>
            </div>
          </div>
        </div>
      </div>
      
      <div class="lmp-modal modal fade" id="messageSubmitModal" tabindex="-1" aria-labelledby="messageSubmitModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <h3 class="modal-title" id="messageSubmitModalLabel">Send Message to Boeing</h3>
            </div>
            <div class="modal-body">
      <h4>Message Sent</h4>
      <p>Your message has been sent. You will receive an email copy of your message.</p>
      <p>A representative from Boeing's Scheduling team will get back to you soon.</p>
            </div>
            <div class="modal-footer">        <button class="btn lmp-secondary" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>
      
      <div class="lmp-modal modal fade" id="upcomingCancelSubmitModal" tabindex="-1" aria-labelledby="upcomingCancelSubmitModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <h3 class="modal-title" id="upcomingCancelSubmitModalLabel">Cancel Booking</h3>
            </div>
            <div class="modal-body">
      <h4>Confirmation #0000001</h4>
      <p>Your cancellation request has been sent. You will receive an email confirmation.</p>
      <p>Your request will be reviewed by Boeing's Scheduling team.</p>
            </div>
            <div class="modal-footer">        <button class="btn lmp-secondary" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>