MVR - Dry Lease Session Detail

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">
                  Dry Lease Session 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 mb-4">
                <div class="row no-gutters">
              
                  <div class="col card-details">
              
                    <div class="p-3 pt-md-4">
                      <ul class="lmp-tag-list active">
                        <li>Today</li>
                        <li>Dry Lease Training</li>
                      </ul>
                      <h2>(737) Full Flight Simulator (FFS)</h2>
                      <ul class="lmp-inline-bullet">
                        <li>737 - 8/9/10</li>
                        <li>Product # 100178895</li>
                        <li>TP ID # 1234567</li>
                      </ul>
                    </div>
                    <ul class="lmp-outlined">
                      <li>Gatwick</li>
                      <li>4 Jan 2021</li>
                      <li>04:00 - 12:00</li>
                      <li>4 hrs</li>
                    </ul>
                  </div>
              
                </div>
              </div>
      
              <a href="#" class="btn lmp-primary mb-4 d-block d-md-inline-block d-lg-none" data-toggle="modal" data-target="#sendMessageModal">Send a Message to Boeing</a>
      
              <div class="lmp-card-single">
                <h3 class="card-title">Participants</h3>
                <div class="card-val">4</div>
              </div>
       <div class="lmp-card-collapse">
        <h3 id="resourceDetailsCardHeading" class="mb-0">
          <button class="card-trigger" type="button" data-toggle="collapse" data-target="#resourceDetails" aria-expanded="true" aria-controls="resourceDetails">
            <span class="card-label">Allocated Resource Details</span>
          </button>
        </h3>
        <div id="resourceDetails" class="card-collapse collapse show" aria-labelledby="resourceDetailsCardHeading">
              <div class="lmp-card-content p-4">
                <h4>S1 B737-7/8-F-06</h4>
                <ul class="list-unstyled">
                  <li>Full Flight Simulator</li>
                  <li>Seats: 2</li>
                  <li>Qualification Level: D</li>
                  <li>Engine Type: GE</li>
                  <li>ETOPS (Pacific) &bull; EFB &bull; CAT III</li>
                </ul>
              </div>
        </div>
       </div>
            </div>
      
            <div class="col-lg-3 lmp-siderail">
      
              <a href="#" class="btn lmp-primary mb-4 mb-lg-5 d-none d-lg-block" data-toggle="modal" data-target="#sendMessageModal">Send a Message to Boeing</a>
      
              <h4>Campus Information</h4>
              <ul class="lmp-lined-list">
                <li><a href="#"><i class="lmp-icon" aria-hidden="true">launch</i> Location Details &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="sendMessageModal" tabindex="-1" aria-labelledby="sendMessageModalLabel" 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="sendMessageModalLabel">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">(737) Full Flight Simulator (FFS)</td>
              <td data-title="Location">
                Gatwick <br>
                S1 B737-7/8-F-06
              </td>
              <td data-title="Date">
                DD Mon YYYY <br>
                XX:XX - XX:XX
              </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="dryleasesession-sendmessage-subject" required>
                <label for="dryleasesession-sendmessage-subject">Subject</label>
              </div>  
            </div>
          </div>
        
          <div class="mb-3">
            <div class="animated-input">
              <div class="form-group">
                <textarea class="form-control" id="dryleasesession-sendmessage-message" rows="4" required></textarea>
                <label for="dryleasesession-sendmessage-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 multi-collapse no-transition show" id="userEmailRow"><span id="userCurrentAddress">karen.smith@westjet.ca</span> <a href="#" id="editEmailTrigger" class="asdf" role="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="userEmailRow multiCollapseExample2">Edit</a></li>
                <li class="collapse multi-collapse no-transition" id="userEmailEdit">
                  <div class="my-3">
                    <div class="animated-input">
                      <div class="form-group">
                        <input type="" class="form-control" id="dryleasesession-sendmessage-useremailedit-input" required value="karen.smith@westjet.ca">
                        <label for="dryleasesession-sendmessage-useremailedit-input">Email</label>
                      </div>  
                    </div>
                  </div>
                </li>
                <li>
                  <div class="my-3">
                    <div class="form-group">
                      <label for="activesendmessage-phonenumber">Phone Number (Optional)</label>
                      <input id="activesendmessage-phonenumber" class="" type="tel" placeholder="Phone Number (Optional)">
                      <div id="lmpFormTelError" class="iti-invalid-feedback">Please enter a valid phone number.</div>
                    </div>
                  </div>
                </li>
              </ul>
      
              <a href="#altContactInfo" id="altContactTrigger" class="lmp-toggle-hide font-size-sm collapsed" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="altContactInfo"><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="altContactInfo">
                <h4>Alternative Contact(s)</h4>
                <div class="animated-input">
                  <div class="form-group">
                    <input type="" class="form-control is-invalid" id="activeformInput-altContacts" aria-describedby="inputHelp-activeformInput-altContacts" required>
                    <label for="activeformInput-altContacts">Email Address(es)</label>
                    <div class="invalid-feedback">Please enter valid email address(es) separated by a semicolon.</div>
                    <span id="inputHelp-activeformInput-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="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">
      <p>Your message has been sent and will be reviewed by the Boeing scheduling team.</p>
            </div>
            <div class="modal-footer">        <button class="btn lmp-secondary" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>