{% include "header.html" %}

<!-- main page  -->
<div class="mdk-header-layout__content">

    <div class="mdk-drawer-layout js-mdk-drawer-layout" data-push data-responsive-width="992px">
        <div class="mdk-drawer-layout__content page">

            <div class=" page__heading-container">
                <div class="page__heading">
                    
                </div>
  <style>
    .sheet-wrap { overflow:auto; border:1px solid #e6e6e6; border-radius:10px; background:#fff; }
    table.sheet { min-width: 1200px; width:100%; border-collapse: separate; border-spacing:0; }
    table.sheet th, table.sheet td { border-bottom:1px solid #eee; border-right:1px solid #eee; vertical-align: top; }
    table.sheet th:first-child, table.sheet td:first-child { border-left:1px solid #eee; }
    table.sheet tr:first-child th { border-top:1px solid #eee; }
    table.sheet th { background:#fafafa; font-weight:700; text-align:center; padding:10px; }
    table.sheet td { padding:8px; height:54px; }

    .col-date { width:110px; font-weight:700; background:#fcfcfc; }
    .col-day  { width:140px; background:#fcfcfc; }

    .slot-title { font-size:14px; font-weight:700; margin:0; }
    .slot-time  { font-size:12px; color:#666; margin:0; }

    .lecture-block{
      display:block;
      padding:6px 10px;
      border-radius:8px;
      font-size:13px;
      line-height:1.2;
      margin-bottom:6px;
      border:1px solid rgba(0,0,0,0.06);
      box-shadow: 0 1px 0 rgba(0,0,0,0.02);
      white-space: normal;
    }
    .lecture-meta{ font-size:11px; opacity:.85; margin-top:3px; }

    /* colors similar to your screenshot */
    .bg-orange{ background:#f6b48b; }
    .bg-pink  { background:#ff4fd8; color:#111; }
    .bg-green { background:#bfe3a6; }
    .bg-blue  { background:#bcdcff; }
    .bg-gray  { background:#eaeaea; }

    .week-divider td{ border-bottom:2px solid #111 !important; }
  </style>



    <div class="d-flex align-items-center justify-content-between mb-3">
      <div>
        <h4 class="mb-0">Lecture Timetable</h4>
        <div class="text-muted small">
          {{ start_day }} → {{ end_day }}
          {% if batch_id %} | Batch: {{ batch_id }} {% endif %}
        </div>
      </div>
    </div>

    <div class="sheet-wrap">
      <table class="sheet">
        <thead>
          <!-- Row 1: Slot Names -->
          <tr>
            <th class="col-date" rowspan="2">Date</th>
            <th class="col-day" rowspan="2">Day</th>

            {% for s in weekday_slots %}
              <th>
                <p class="slot-title">{{ s.label }}</p>
              </th>
            {% endfor %}
          </tr>

          <!-- Row 2: Slot Times (Weekdays row by default like screenshot) -->
          <tr>
            {% for s in weekday_slots %}
              <th><p class="slot-time">{{ s.time }}</p></th>
            {% endfor %}
          </tr>

          <!-- Optional: show weekend times row like screenshot "Weekends" -->
          <tr>
            <th class="col-date text-start">Weekends</th>
            <th class="col-day"></th>
            {% for s in weekend_slots %}
              <th><p class="slot-time">{{ s.time }}</p></th>
            {% endfor %}
          </tr>
        </thead>

        <tbody>
          {% for r in rows %}
            <tr>
              <td class="col-date">{{ r.date_label }}</td>
              <td class="col-day">{{ r.day_name }}</td>

              {% for slot_no in "1234" %}
                {% with sn=slot_no|add:"0" %}
                {% endwith %}
              {% endfor %}

              <!-- Slot 1 -->
              <td>
                {% for lec in r.slots.1 %}
                  <span class="lecture-block {{ lec.color_class }}">
                    {{ lec.display }}
                    <div class="lecture-meta">{{ lec.start }} - {{ lec.end }}</div>
                  </span>
                {% endfor %}
              </td>

              <!-- Slot 2 -->
              <td>
                {% for lec in r.slots.2 %}
                  <span class="lecture-block {{ lec.color_class }}">
                    {{ lec.display }}
                    <div class="lecture-meta">{{ lec.start }} - {{ lec.end }}</div>
                  </span>
                {% endfor %}
              </td>

              <!-- Slot 3 -->
              <td>
                {% for lec in r.slots.3 %}
                  <span class="lecture-block {{ lec.color_class }}">
                    {{ lec.display }}
                    <div class="lecture-meta">{{ lec.start }} - {{ lec.end }}</div>
                  </span>
                {% endfor %}
              </td>

              <!-- Slot 4 -->
              <td>
                {% for lec in r.slots.4 %}
                  <span class="lecture-block {{ lec.color_class }}">
                    {{ lec.display }}
                    <div class="lecture-meta">{{ lec.start }} - {{ lec.end }}</div>
                  </span>
                {% endfor %}
              </td>
            </tr>

            <!-- Optional week divider like screenshot thick line -->
            {% if forloop.counter0 != 0 and forloop.counter0|add:1|divisibleby:7 %}
              <tr class="week-divider"><td colspan="6"></td></tr>
            {% endif %}
          {% endfor %}
        </tbody>
      </table>
    </div>

        </div>
        <!-- drawer -->
        {% include "sidebar.html"%}
        <!-- // END drawer -->
    </div>
    <!-- // END drawer-layout -->
</div>
<!-- // END header-layout__content -->
<!-- // END header-layout -->

{% include "footer.html" %}