{% extends "app.html" %}
{% block header_text %}{{rel_path}}{% endblock %}

{% block main %}

 <style>

    .file-list {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      overflow-y: auto;
    }

    .file-item {
      display: flex;
      align-items: center;
      background: #1c1c1c;
      padding: 1rem;
      border-radius: 0.5rem;
      border: 1px solid #333;
      transition: background 0.2s;
    }

    .file-item:hover {
      background: #2a2a2a;
    }

    .file-icon {
      flex: 0 0 30px;
      text-align: center;
      margin-right: 1rem;
    }

    .file-name {
      flex: 1;
      font-weight: bold;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .file-type, .file-size {
      flex: 0 0 auto;
      margin-left: 1rem;
      font-size: 0.9rem;
      color: #aaa;
    }

    @media (max-width: 600px) {
      .file-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
      }

      .file-type, .file-size {
        margin-left: 0;
      }
    }
  </style>
    <div class="container">
  <div class="file-list">
    {% for file in files %}
    <a href="/repository/{{username}}/{{repo_name}}/{{ file.path }}" class="file-item">
        <div class="file-icon">
          {% if file.type == 'tree' %}
            <i class="fa fa-folder"></i>
          {% else %}
            <i class="fa fa-file"></i>
          {% endif %}
        </div>
        <div class="file-name">{{ file.name }}</div>
        <div class="file-type">{{ file.type }}</div>
        <div class="file-size">{{ file.size }} B</div>
      </a>
    {% endfor %}
  </div>
  </div>

  {% endblock %}