{% extends "base.html" %} {% block content %}
<center>
  <h1>{{ title }}</h1>

  <p>
    by <a href="{{ author_link }}">{{ author }}</a> in
    <a href="{{ category_link }}">{{ category }}</a> &gt;
    <a href="{{ channel_link }}">{{ channel }}</a>
  </p>
  <p>
    {{ views }} Views, {{ favorites }} Favorites, {{ comment_count }} Comments
  </p>
</center>

<div class="container">
  {% for step in steps %}
  <div class="row">
    <h2>{{ step.title }}</h2>
    <div class="step-imgs">
      {% for step_img in step.imgs %}
      <img src="{{ step_img.src }}" alt="{{ step_img.alt }}" />
      {% endfor %}
    </div>
    <div class="step-vids">
      {% for step_video in step.videos %}
      <video src="{{ step_video }}"></video>
      {% endfor %}
    </div>
    {{ step.text|safe }} {% endfor %}

    <br />
    {% for index, comment in enumerate(comments) %}
    <!-- TODO: Fix comments -->
    <a href="{{ comment[4] }}">
      <img
        style="display: inline-block"
        width="30px"
        height="30px"
        src="{{ comment[1] }}"
        alt="{{ comment[2] }}"
      />
      <span>{{ comment[3] }}</span>
    </a>
    <span>{{ comment[5] }}</span>
    <span>{{ comment[0] }} votes</span>
    {{ comment[6]|safe }}
    <input type="checkbox" id="replies{{ index }}" class="reply-button" />
    <label for="replies{{ index }}"><b>{{ comment[7] }} replies</b></label>
    <div class="replies">
      {% for reply in comment[8] %}
      <blockquote>
        <a href="{{ reply[4] }}">
          <img
            style="display: inline-block"
            width="30px"
            height="30px"
            src="{{ reply[1] }}"
            alt="{{ comment[2] }}"
          />
          <span>{{ reply[3] }}</span>
        </a>
        <span>{{ reply[5] }}</span>
        <span>{{ reply[0] }} votes</span>
        {{ reply[6]|safe }}
      </blockquote>
      {% endfor %}
    </div>
    <br />
  </div>
  {% endfor %}
</div>
{% endblock %}