
<div class="container-fluid">
  <div class="row">
    <div class="col-md-2">
      <ul class="nav nav-pills flex-column" id="myTab" role="tablist">
        {% for log_file in log_files %}
        <li class="nav-item" role="presentation">
          <button
            class="nav-link btn btn-light {% if loop.last %}active{% endif %}" 
            id="project-{{log_file['id']}}-tab" 
            data-bs-toggle="tab" 
            data-bs-target="#project-{{log_file['id']}}" 
            type="button" 
            role="tab"
            aria-controls="project-{{log_file['id']}}"
            aria-selected="{% if loop.last %}true{% else %}false{% endif %}"
          >{{log_file['name']}}</button>
        </li>
        {% endfor %}
      </ul>
    </div>
    
    <div class="col-md-10">
      <div class="tab-content" id="myTabContent">
        {% for log_file in log_files %}
        <div 
            class="tab-pane fade {% if loop.last %}show active{% endif %}"
            id="project-{{log_file['id']}}" 
            role="tabpanel" 
            aria-labelledby="project-{{log_file['id']}}-tab"
        >
          <div style="white-space: pre-wrap; font-family: 'Consolas', monospace;">{{log_file['content']|safe}}
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>

</div>
