{% 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 mb-6">
      <div class="col-12">
        <h2>{{ step.title }}</h2>
      </div>
    </div>

    {% if step.imgs %}
    <div class="row mb-3 justify-content-center">
      {% for step_img in step.imgs %}
        <div class="col-md-3">
          <img src="{{ step_img.src }}" alt="{{ step_img.alt }}" class="img-fluid" />
        </div>
      {% endfor %}
    </div>
    {% endif %}

    {% if step.videos %}
    <div class="row mb-3 justify-content-center">
      {% for step_video in step.videos %}
        <div class="col-md-3">
          <video src="{{ step_video }}" controls class="w-100"></video>
        </div>
      {% endfor %}
    </div>
    {% endif %}

    {% if step.iframes %}
    <div class="row mb-3 justify-content-center">
      {% for step_iframe in step.iframes %}
        <div class="col-md-3 mb-3">
          <iframe src="{{ step_iframe.src }}" width="100%" height="{{ step_iframe.height }}"></iframe>
        </div>
      {% endfor %}
    </div>
    {% endif %}

    {% if step.downloads %}
    <div class="row">
      <div class="col-12">
        <h3>Downloads</h3>
      </div>
      {% for step_download in step.downloads %}
        <div class="col-md-2 mb-3">
          <a href="{{ step_download.src }}" class="btn btn-primary">{{ step_download.name }}</a>
        </div>
      {% endfor %}
    </div>
    {% endif %}

    <div class="row">
      <div class="col-12 mb-3 wrap">
        {{ step.text|safe }}
      </div>
    </div>
  {% endfor %}
</div>


    <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 %}