{% extends 'main/base.html' %}
{% block content %}
{% load custom_tags %}
<!-- <style>
  @media only screen and (min-width: 800px) {
  #categories {
    width: 70%;
    float: right;
  }
}
</style> -->
{% load static %}

<link rel="stylesheet" type="text/css" href="{% static 'css/index.css' %}"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@1,300&display=swap" rel="stylesheet">


<div class="bg-yellow py-5 border-bottom-dark mt-5">
  <div class="container">
    <div class="row">
      <div class="col-6">
        <h1 class="display-4">Stay curious</h1>
        <p class="lead">Discover stories, thinking, and expertise <br> from writers on any topic.</p>
        <a href="#" class="btn btn-outline-dark btn-dark text-light rounded-pill">Start Reading</a>
      </div>
      <div class="col-6">
      </div>
    </div>
  </div>
</div>
    <div class="container mt-5">

      <div class="row">
        <h2>החמים</h2>
        <div class="col-12 mb-2">
        </div>
          {% for post in posts %}
            <!-- SECTION-START  -->
          <article class="col-sm-4 mb-2">
            <div class="row">
              <div class="col-1">
                <h2 class="trending">{{forloop.counter}}</h2s>
              </div>
              <div class="col-11">
                <img src="{{post.creator.avatar.url}}" alt="" class="rounded-circle">
                <span class="small ms-1">
                  <a class="author" href="{% url 'main:creator' post.creator.id %}">{{post.creator}}</a>
                </span>
                <h6 class="mt-2"> <strong><a href="{% url 'main:post' post.pk %}">{{post.title}}</a></strong></h6>
                <ul class="list-inline small">
                  <li class="list-inline-item">{{post.pub_date}}</li>
                  <li class="list-inline-item"><i class="fa-regular fa-star"></i></li>
                </ul>
              </div>
            </div>
          </article>

        {% endfor %}
      </div>
      <script>
        window.addEventListener('scroll', function() {
          var stickyAside = document.getElementById('sticky-aside');
          var container = stickyAside.closest('.row');
          var containerTop = container.offsetTop;
          var containerBottom = containerTop + container.offsetHeight;
          var asideHeight = stickyAside.offsetHeight;

          if (window.pageYOffset > containerTop && window.pageYOffset < containerBottom - asideHeight) {
            stickyAside.classList.add('stick');
          } else {
            stickyAside.classList.remove('sticky');
          }
        });
                </script>
      <div class="row mt-5 border-top border-dark pt-5">
        <aside class="col-sm-4 sticky-aside" id="sticky-aside">
          <h6><small><strong>DISCOVER MORE OF WHAT MATTERS TO YOU</strong></small></h6>
          <ul class="list-inline aside-buttons">
            <li class="list-inline-item">
              <a href="" class="btn btn-sm btn-outline-secondary">Lorem.</a>
            </li>
            <li class="list-inline-item">
              <a href="" class="btn btn-sm btn-outline-secondary">Lorem, ipsum.</a>
            </li>
            <li class="list-inline-item">
              <a href="" class="btn btn-sm btn-outline-secondary">Lorem, ipsum.</a>
            </li>
            <li class="list-inline-item">
              <a href="" class="btn btn-sm btn-outline-secondary">Lorem, ipsum.</a>
            </li>
            <li class="list-inline-item">
              <a href="" class="btn btn-sm btn-outline-secondary">Lorem, ipsum.</a>
            </li>
            <li class="list-inline-item">
              <a href="" class="btn btn-sm btn-outline-secondary">Lorem, ipsum.</a>
            </li>
            <li class="list-inline-item">
              <a href="" class="btn btn-sm btn-outline-secondary">Lorem.</a>
            </li>
            <li class="list-inline-item">
              <a href="" class="btn btn-sm btn-outline-secondary">Lorem.</a>
            </li>
          </ul>
          </aside>

        <section class="col-sm-8">
      {% for post in viewed_posts %}
      <article class="row mb-3">
        <div class="col-8">
          <img src="{{post.creator.avatar.url}}" alt="" class="rounded-circle">
          <span class="small ms-1">{{post.creator}}</span>
          <h6 class="mt-2"> <strong><a href="{% url 'main:post' post.pk %}">{{post.title}}</a></strong></h6>
          <p>Show me the money instead</p>
          <ul class="list-inline small">
            <li class="list-inline-item">May 4</li>
            <li class="list-inline-item">4 min read</li>
            <li class="list-inline-item"><i class="fa-regular fa-star"></i></li>
          </ul>
        </div>
        <div class="col-4">
          <img src="https://picsum.photos/400/250" alt="" class="w-100">
        </div>
      </article>
      {% endfor %}
    </section>
        <HR></HR>
        <!-- FOOTER-START  -->
        <ul class="ml-0 pl-0">
          <li class="list-inline-item">
            <small> <strong><span class="text-secondary pr-2">Help</span> </strong></small>
          </li>
          <li class="list-inline-item">
            <small><strong><span class="text-secondary pr-2">Status</span></strong></small>
          </li>
          <li class="list-inline-item">
            <small><strong><span class="text-secondary pr-2">Writers</span></strong></small>
          </li>
          <li class="list-inline-item">
            <small><strong><span class="text-secondary pr-2">Blog</span></strong></small>
          </li>
          <li class="list-inline-item">
            <small><strong><span class="text-secondary pr-2">Careers</span></strong></small>
          </li>
          <li class="list-inline-item">
            <small><strong><span class="text-secondary pr-2">Privacy</span></strong></small>
          </li>
          <br>
          <li class="list-inline-item">
            <small><strong><span class="text-secondary pr-2">Terms</span></strong></small>
          </li>
          <li class="list-inline-item">
            <small><strong><span class="text-secondary">About</span></strong></small>
          </li>
          <li class="list-inline-item">
            <small><strong><span class="text-secondary">Knowable</span></strong></small>
          </li>
        </ul>
        <!-- FOOTER-END  -->

{% endblock %}