<div id="documentation" class="documentation border border-3 rounded-3 p-3 m-3">
   <h5 class="my-2 fw-bold">{{'documentation.h5.1'|trans}}</h5>

   <div class="card mb-3">
      <div class="row g-0">
         <div class="col-4">
            <a data-lightbox="lightbox" data-title="Step 1: - Log into your bookingtime account and navigate to “Store” and then “Booking Module”." href="{{WP_HOME}}/wp-content/plugins/bt_appointment/assets/images/documentation_01.jpg">
               <img class="image-embed-item d-block w-100" src="{{WP_HOME}}/wp-content/plugins/bt_appointment/assets/images/documentation_01.jpg" alt="" width="100%" height="auto">
            </a>
         </div>
         <div class="col-8">
            <div class="card-body">
               <h5 class="card-title">{{'documentation.step.1'|trans}}</h5>
               <p class="card-text">{{'documentation.step.1.text'|trans}}</p>
            </div>
         </div>
      </div>
   </div>
   <div class="card mb-3">
      <div class="row g-0">
         <div class="col-4">
            <a data-lightbox="lightbox" data-title="Step 2: - Choose “Settings” in the top right. In the now open side bar you will find “Link to the module”. This is your booking page URL." href="{{WP_HOME}}/wp-content/plugins/bt_appointment/assets/images/documentation_02.jpg">
               <img class="image-embed-item d-block w-100" src="{{WP_HOME}}/wp-content/plugins/bt_appointment/assets/images/documentation_02.jpg" alt="" width="100%" height="auto">
            </a>
         </div>
         <div class="col-8">
            <div class="card-body">
               <h5 class="card-title">{{'documentation.step.2'|trans}}</h5>
               <p class="card-text">{{'documentation.step.2.text'|trans}}</p>
            </div>
         </div>
      </div>
   </div>
</div>
