
<div id="my_shifts">
  <div class="page_title txtcenter">
    <h1>Mes Services</h1>
  </div>
  <div class="tiles_container">
    <div class="tile full_width_tile" id="incoming_shifts_area">
      <div class="tile_title">
        À venir
      </div>
      <div class="loading-incoming-shifts">
        <i class="fas fa-spinner fa-spin fa-lg"></i>
      </div>
      <div class="tile_content" id="incoming_shifts"></div>
    </div>
    <div class="tile full_width_tile" id="history_area">
      <div class="tile_title">
        Historique de mes services
      </div>
      <div class="loading-history">
        <i class="fas fa-spinner fa-spin fa-lg"></i>
      </div>
      <div class="tile_content" id="history">
        <div class="history_table_area">
          <table id="history_table" class="display" cellspacing="0" width="100%"></table>
        </div>
        <div class="more_history">
          <div class="loading-more-history">
            <i class="fas fa-spinner fa-spin fa-lg"></i>
          </div>
          <button 
            type="button" 
            class="btn btn--primary more_history_button"
            title="Charger plus d'éléments..."
          >
            <i class="fas fa-plus more_history_icon"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>