<article data-category="{{ changeset.category }}">
  <h3>
    <i class="fas category-icon-{{ changeset.category }} category-icon-section"></i>
    {{ changeset.title }}
  </h3>
  <div class="table-wrapper">
    <table>
      <thead>
        <tr>
          <th>Commit</th>
          <th>Message</th>
          <th>Timestamp</th>
          <th class="author-column">Author</th>
          <th class="files-column">Files</th>
        </tr>
      </thead>
      <tbody>
        {% for commit in changeset.commits|reverse %}
        <tr>
          <td>
            <a href="{{ config.repo_base_url }}/commit/{{ commit.full_hash|default(commit.hash) }}" class="commit-hash" target="_blank" rel="noopener">
              {{ commit.hash|slice(0, 7) }}
            </a>
          </td>
          <td class="message-cell">
            <div class="message-wrapper">
              <span class="message-subject">{{ commit.subject|default(commit.message|split('\n')|first) }}</span>
              {% if commit.message and commit.message|split('\n')|length > 1 %}
              <span class="message-expand-icon" title="Click to see full message">...</span>
              <div class="message-full">
                <pre>{{ commit.message }}</pre>
              </div>
              {% endif %}
            </div>
          </td>
          <td>
            <div class="commit-date">
              <span class="date-absolute" data-timestamp="{{ commit.timestamp }}">{{ commit.timestamp }}</span>
            </div>
          </td>
          <td class="author-column">
            <div class="author-info">
              {% if commit.github_username %}
              <img src="https://github.com/{{ commit.github_username }}.png?size=24" alt="{{ commit.author }}" class="author-avatar" loading="lazy">
              <a href="https://github.com/{{ commit.github_username }}" class="author-link" target="_blank" rel="noopener">{{ commit.author }}</a>
              {% else %}
              <span class="author-name">{{ commit.author }}</span>
              {% endif %}
            </div>
          </td>
          <td class="files-column">
            <div class="files-wrapper">
              <span class="file-count">{{ commit.files_count|default(commit.files|length) }} file{{ (commit.files_count|default(commit.files|length)) != 1 ? 's' : '' }}</span>
              {% if commit.files and commit.files|length > 0 %}
              <div class="files-list">
                <div class="files-list-header">Modified Files:</div>
                <ul>
                  {% for file in commit.files %}
                  <li>{{ file }}</li>
                  {% endfor %}
                </ul>
              </div>
              {% endif %}
            </div>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</article>