{{#libraries}}
  <li class="hours_unit_li" id="hours_unit_{{unit_id}}">
    <div class="row">
      <div class="col-md-6">
        <div class="row">
          <div class="col-md-10">
            <h4 class="hours_unit_title library-name-hrs">{{unit_name}}</h4>
          </div>
          <div class="col-md-2" id="libOpen{{unit_id}}">
            {{#calendar.open}}
              <span class="badge badge-green open-closed-status">Open</span>
            {{/calendar.open}}
            {{^calendar.open}}
              <span class="badge badge-red open-closed-status">Closed</span>
            {{/calendar.open}}
          </div>
        </div>  
        <div class="hours_unit_toggle-hide">
          <p>{{{description}}}</p>
          <p class="hours_unit_address-p">{{street_address}}</p>
          <p class="hours_unit_address-p">{{city}}, {{state}} {{zip}}</p>
          <p class="hours_unit_address-p">{{phone_number}}</p>
          <p>
            <a href="{{weblinks}}">{{weblinks}}</a>
          </p>
          <div>
            <a class="fancybox btn btn-primary fancy-image hours_unit_park-map btn-sm" rel="group" href="{{parking_image}}" aria-label="Parking near {{unit_name}}" title="Parking near {{unit_name}}">PARKING</a>
            <a class="fancybox btn btn-primary fancybox.iframe fancy-iframe hours_unit_park-map btn-sm" rel="group" href="{{map_url}}" aria-label="Map of {{unit_name}}" title="Map of {{unit_name}}">MAP</a>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <h5 class="hours_unit_toggle-hide">Next Seven Days</h5>
        <span class="hours_unit_toggle-show hours-highlight hours_unit_today-span">
          <span style="vertical-align:top">Today: </span>
          <div style="display:inline-block">
            {{#calendar.nextSevenDays.0.hours}}
            <span class="hours_unit_table-label">
              {{label}}
            </span>
            {{/calendar.nextSevenDays.0.hours}}
          </div>
        </span>
        <table class="hours_unit_toggle-hide">
          <thead class="sr-only">
            <tr>
              <th>Day</th>
              <th>Hours</th>
            </tr>
          </thead>
          <tbody id="hours_unit_hours-table-{{unit_id}}">
          {{#calendar.nextSevenDays}}
            <tr class="hours_unit_row">
              <td style="vertical-align:top">{{day}}:</td>
              <td>
                {{#hours}}
                <span class="hours_unit_table-label">
                  {{label}}
                </span>
                {{/hours}}
              </td>
            </tr>
          {{/calendar.nextSevenDays}}
          </tbody>
        </table> 
        {{#if calendar_note}}       
        <p class="hours_unit_toggle-hide hours_unit_calendar-note">{{{parse_html calendar_note}}}</p>
        {{/if}}
        <div class="date-format-warning hours_unit_toggle-hide" id="date-format-warning-{{unit_id}}"></div>
        <div class="hours_unit_toggle-hide hours_unit_search-text">Search Hours:</div>
        <form class="hours_unit_toggle-hide hours_unit_hours-search form-inline">
          <div class="input-group">
            <input type="text" class="datepicker form-control input-sm" id="unit-datepicker-{{unit_id}}" data-unit-id="{{unit_id}}" placeholder="MM/DD/YYYY" aria-label="Enter hours in MM/DD/YYYY format">
            <span class="input-group-btn">
              <input type="button" value="Search" class="hours_unit_search_button btn btn-primary btn-sm" data-unit-id="{{unit_id}}">
            </span>
          </div>
        </form>
      </div>
      <div class="col-md-3">
        <button class="hours_unit_button pull-right btn btn-sm">
          <span class="hours_unit_toggle-show">Expand</span>
          <span class="hours_unit_toggle-hide">Collapse</span>  
        </button>
        <img class="img-responsive hours_unit_toggle-hide hours_unit_building_img hidden-xs" src="assets/images/buildings/display/building_{{build_id}}.jpg" alt="{{unit_name}}">
        </div>
    </div>
  </li>
{{/libraries}}