{% extends "base.html" %}

{% block title %}{{ request.state.title }}{% endblock title %}

{% block content %}
    <div id="container_wr" class="w-100 d-flex flex-column flex-md-row">
        <div id="container" class="main_photo mb-4 mb-md-0">
          <div class="latest_top_wr pe-md-4">
            {{ render_latest_posts(request, 'main_list2', 'notice', 4, 23)|safe }}
          </div>
        </div>
        <div id="aside" class="main_aside">

          <!-- 설문조사 -->
          <div class="d-md-block d-none">
            {% include "/bbs/poll.html" %}
          </div>

          <!-- 공지사항 -->
          {{ render_latest_posts(request, 'main_notice', 'notice', 4, 23)|safe }}

          <!-- 접속자집계 { -->
          <div class="d-md-block d-none">
            {% if render_visit_statistics %}
              {{ render_visit_statistics(request)|safe }}
            {% endif %}
          </div>

          <script>
            // aside/최신글 - 탭메뉴 기능
            var tabItems = document.querySelectorAll('.aside_tab ul.tab_01 li');

            tabItems.forEach(function (item) {
              item.addEventListener('click', function () {
                var asideTabId = this.getAttribute('data-tab');

                // Remove 'current' class from all tab items and content elements
                tabItems.forEach(function (tabItem) {
                  tabItem.classList.remove('current');
                });

                var contentElements = document.querySelectorAll('.aside_tab .content01');
                contentElements.forEach(function (contentElement) {
                  contentElement.classList.remove('current');
                });

                // Add 'current' class to the clicked tab item and corresponding content element
                this.classList.add('current');
                document.getElementById(asideTabId).classList.add('current');
              });
            });
          </script>
        </div>
    </div>
    <div id="container_wr" class="w-100">
      <h2 class="blind">최신글</h2>
      <div class="row mb-4">
          {{ render_latest_posts(request, 'pic_list', 'free', 4, 23)|safe }}
          {{ render_latest_posts(request, 'pic_list', 'qa', 4, 23)|safe }}
      </div>
      <div class="mb-4">
          {{ render_latest_posts(request, 'pic_block', 'gallery', 4, 23)|safe }}
      </div>
      <div class="row">
          {% for board in boards %}
          <div class="col-md-4">
              {{ render_latest_posts(request, 'basic', board.bo_table, 6, 24)|safe }}
          </div>
          {% endfor %}
      </div>
      <!-- 설문조사 -->
      <div class="d-md-none d-block">
        {% include "/bbs/poll.html" %}
      </div>
      <!-- 접속자집계 { -->
      <div class="d-md-none d-block">
        {% if render_visit_statistics %}
          {{ render_visit_statistics(request)|safe }}
        {% endif %}
      </div>
    </div>
{% endblock content %}