{% extends 'Dashboard/layout.html' %}


{% block content %}
<div class="bg-gray-100 flex-1 p-6 md:mt-16">
  <!-- General Report -->
  <div class="grid grid-cols-4 gap-6 xl:grid-cols-1">


    <!-- card -->
    <div class="report-card">
      <div class="card">
        <div class="card-body flex flex-col">

          <!-- top -->
          <div class="flex flex-row justify-between items-center">
            <div class="h6 text-indigo-700 fad fa-blog"></div>

          </div>
          <!-- end top -->

          <!-- bottom -->
          <div class="mt-8">
            <h1 class="h5">
              {{request.user.bookmark_blogs.count}}

            </h1>
            <p>Blogs</p>
          </div>
          <!-- end bottom -->

        </div>
      </div>
      <div class="footer bg-white p-1 mx-4 border border-t-0 rounded rounded-t-none"></div>
    </div>
    <!-- end card -->


    <!-- card -->
    <div class="report-card">
      <div class="card">
        <div class="card-body flex flex-col">

          <!-- top -->
          <div class="flex flex-row justify-between items-center">
            <div class="h6 text-red-700 fad fa-book"></div>

          </div>
          <!-- end top -->

          <!-- bottom -->
          <div class="mt-8">
            <h1 class="h5">
              {{request.user.bookmark_tutorials.count}}
            </h1>
            <p>Tutorials</p>
          </div>
          <!-- end bottom -->

        </div>
      </div>
      <div class="footer bg-white p-1 mx-4 border border-t-0 rounded rounded-t-none"></div>
    </div>
    <!-- end card -->
  </div>
  <!-- End General Report -->

  <!-- start quick Info -->
  <div class="grid grid-cols-2 gap-6 mt-6 xl:grid-cols-1">

    <div class="card">
      <div class="card-header">Blogs

      </div>
      {% for blog in request.user.bookmark_blogs.all %}
      <div class="px-6 py-3 flex flex-row gap-2 items-center text-gray-600 border-b line-clamp-1">
        {{forloop.counter}}-
        <a href="{{blog.url}}">
          {{blog.blog.title}}
        </a>
      </div>
      {% endfor %}


    </div>

    <div class="card">
      <div class="card-header">Tutorials</div>
      {% for blog in request.user.bookmark_tutorials.all %}
      <div class="px-6 py-3 flex flex-row gap-2 items-center text-gray-600 border-b line-clamp-1">
        {{forloop.counter}}-
        <a href="{{blog.url}}">
          {{blog.tutorial.title}}
        </a>
      </div>
      {% endfor %}
    </div>

  </div>
  <!-- end quick Info -->
</div>
{% endblock content %}