{%- set alert_icon = load_data(path="icons/phosphor/" ~ icon ~ ".svg", required=false) -%}
{%- if not alert_icon -%}
  {%- set alert_icon = "info" -%}
{%- endif -%}
<div class="comments" {{ if accentStyle }}{{ accentStyle | safe }}{{ end }}>
  <div class="comments-header">
    <h3 class="comments-title">Comments</h3>
    <a class="comments-toggle" href="#">
      {%- set icon = load_data(path="icons/phosphor/" ~ "message-circle" ~ ".svg", required=false) -%}
      {%- if icon -%}{{ icon | safe }}{{ else }}💬{{ end }}
    </a>
  </div>
  <div class="comments-list">
    {%- set comments = load_data(path="data/comments.toml", required=false) -%}
    {%- if comments -%}
      {%- for comment in comments -%}
        <div class="comment">
          <div class="comment-header">
            <span class="comment-author">{{ comment.author }}</span>
            <span class="comment-date">{{ comment.date }}</span>
          </div>
          <p class="comment-content">{{ comment.content }}</p>
        </div>
      {%- endfor -%}
    {%- else -%}
      <div class="comments-empty">
        <div class="comments-empty-icon">💭</div>
        <p>No comments yet. Be the first to share your thoughts!</p>
      </div>
    {%- endif -%}
  </div>
</div>