{% extends "base.html" %}
{% block content %}

<div class="row row-cols-1 row-cols-lg-2 row-cols-xl-3 row-cols-xxl-4 p-1">
    <div class="col">
        <!-- Background video -->
          
        <div class="card mb-2 shadow">
            <div class="video-background-holder ratio ratio-3x1">
                <div class="video-background-overlay"></div>
                <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
                      <source src="/static/background.mp4" type="video/mp4">
                  </video>
                <div class="video-background-content container h-100">
                  <div class="d-flex h-100 text-center align-items-center">
                    <div class="w-100 text-white">
                      <h1 class="display-4">Welcome {{ context.user }}.</h1>
                    </div>
                  </div>
                </div>
              </div>
            <div class="card-body">
              <!-- <div class="d-flex justify-content-between align-items-center"> -->
                <h5 class="card-title text-center">Today's weather {{ context.weather_string }} <span class="badge bg-light">{{ context.weather_emoji }}</span></h5>
              </div>
              <!-- <p class="card-text">We .</p> -->

            </div>

        </div>
        <h1 class="display-4">Recommended for you:</h1>
        <div class="list"></div>
    </div>     
</div>

{% endblock %}