{#-
  Home page of the documentation.

  docs/README.md selects this template with `template: home.html` in its front
  matter. The page is built here, not in Markdown. Styles live in
  docs/stylesheets/home.css (loaded only on this page), behavior in
  docs/javascripts/home.js, and the animation data in partials/home-data.json,
  generated by tools/docs/home_page/generate_home_data.py.
  See tools/docs/home_page/README.md.

  The layout, the color tokens and the stage follow the home page of the
  skforecast documentation, so both sites read as one family.
-#}
{% extends "main.html" %}

{% block extrahead %}
  {{ super() }}
  {#- Preview when the page is shared (LinkedIn, Slack, X...). Social networks
      need absolute URLs, so they point to the stable release (the alias mike
      deploys, see mkdocs.yml). The image is generated by
      tools/docs/home_page/make_social_card.mjs. -#}
  {% set home_url = config.site_url | trim("/") ~ "/stable/" %}
  {% set share_title = "skforecast-ai: the forecasting assistant that shows its work" %}
  {% set share_text = "From raw time series to a validated forecast and the skforecast script that produced it. Deterministic decisions, an optional LLM that explains them." %}
  <meta property="og:type" content="website">
  <meta property="og:site_name" content="skforecast-ai">
  <meta property="og:url" content="{{ home_url }}">
  <meta property="og:title" content="{{ share_title }}">
  <meta property="og:description" content="{{ share_text }}">
  <meta property="og:image" content="{{ home_url }}img/social-card-home.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="skforecast-ai forecast of hourly bike sharing users with its 80% interval, and the ask() answer that explains the evaluation metrics">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="{{ share_title }}">
  <meta name="twitter:description" content="{{ share_text }}">
  <meta name="twitter:image" content="{{ home_url }}img/social-card-home.png">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&display=swap">
  <link rel="stylesheet" href="{{ 'stylesheets/home.css' | url }}">
{% endblock %}

{% block container %}
{#- The animation data goes in an attribute, not in a <script type="application/json">:
    instant navigation re-runs the scripts of the page without their type attribute. -#}
<div class="sk-home" id="sk-home" data-home="{% filter e %}{% include "partials/home-data.json" %}{% endfilter %}">

  <section class="hero">
    <div class="container">
      <div class="eyebrow">AI forecasting assistant, powered by skforecast</div>
      <h1>The forecasting assistant that shows its work</h1>
      <p class="lede">Give it a time series. skforecast-ai profiles the data, chooses the model with deterministic rules, validates it and returns the forecast together with the skforecast script that produced it. An optional LLM explains every decision; it never makes them.</p>
      <div class="ctas">
        <a class="btn primary" href="{{ 'quick-start/first-forecast.html' | url }}">Your first forecast</a>
        <a class="btn" href="{{ 'user-guides/agentic-forecasting.html' | url }}">User guide</a>
        <a class="btn" href="https://github.com/skforecast/skforecast-ai"><span class="ico">{% include ".icons/fontawesome/brands/github.svg" %}</span>GitHub</a>
        <div class="pip"><span><span class="dollar">$ </span>pip install skforecast-ai</span><button type="button" class="copy" data-copy="pip install skforecast-ai" aria-label="Copy install command" title="Copy"><span class="cp">{% include ".icons/material/content-copy.svg" %}</span><span class="ok">{% include ".icons/material/check.svg" %}</span></button></div>
      </div>
    </div>
  </section>

  <div class="stage-wrap">
    <div class="container">
      <div class="stage" id="stage">
        <div class="stage-top">
          <div class="steps" role="group" aria-label="Animation steps">
            <button class="step" type="button" data-step="0"><span class="n">Step 1</span><span class="t">Profile the data</span><span class="bar"></span></button>
            <button class="step" type="button" data-step="1"><span class="n">Step 2</span><span class="t">Plan the model</span><span class="bar"></span></button>
            <button class="step" type="button" data-step="2"><span class="n">Step 3</span><span class="t">Run the code</span><span class="bar"></span></button>
            <button class="step llm" type="button" data-step="3"><span class="n">Step 4 <em>LLM, optional</em></span><span class="t">Ask why</span><span class="bar"></span></button>
          </div>
          <button class="play" type="button" id="play" aria-label="Pause animation"><svg viewBox="0 0 24 24" aria-hidden="true"><path id="play-icon" d="M7 5h4v14H7zM13 5h4v14h-4z"/></svg></button>
        </div>
        <div class="stage-body">
          <div class="chart-box">
            <svg id="chart" viewBox="0 0 900 400" role="img" aria-labelledby="chart-title">
              <title id="chart-title">Hourly bike sharing users over the last week of 2012, the lags found by the profile, the rolling windows of the plan, and the 36-hour LightGBM forecast with its 80% prediction interval against the held-out observations</title>
              <g id="g-grid"></g>
              <rect id="g-hz" class="g-hz"/>
              <line id="g-hzline" class="g-hzline"/>
              <text id="g-hzlab" class="g-hzlab"></text>
              <g id="g-wins"></g>
              <path id="g-band" class="g-band"/>
              <path id="g-hist" class="g-hist"/>
              <path id="g-act" class="g-act"/>
              <g id="g-arcs"></g>
              <path id="g-fc" class="g-fc"/>
              <circle id="g-dot" class="g-dot" r="4.5"/>
              <g id="g-leg"><circle id="g-legdot" class="g-dot" r="5"/><text id="g-dlab" class="g-dlab">LightGBM forecast</text></g>
            </svg>
          </div>
          <div class="side">
            <div class="pane on" id="pane-0">
              <h3>What the profile found</h3>
              <dl class="facts">
                <dt>Frequency</dt><dd>Hourly</dd>
                <dt>Observations</dt><dd id="f-nobs">2,000</dd>
                <dt>Exogenous</dt><dd>holiday, weather, temp</dd>
                <dt>Categorical</dt><dd>weather</dd>
                <dt>Missing values</dt><dd>None</dd>
              </dl>
              <p class="small">Strongest lags (partial autocorrelation)</p>
              <div class="pacf" id="pacf"></div>
            </div>
            <div class="pane" id="pane-1">
              <h3>Every decision, with its rule</h3>
              <ol class="decisions">
                <li><b>ForecasterRecursive</b><span>One series, 2,000 observations</span></li>
                <li><b>LGBMRegressor</b><span>Gradient boosting for this size</span></li>
                <li><b>28 lags</b><span>The significant ones from the profile</span></li>
                <li><b>Rolling means</b><span>3, 24 and 168 hours, plus std of 3</span></li>
                <li><b>Calendar</b><span>Hour, day of week, weekend</span></li>
                <li><b>80% interval</b><span>Bootstrapped residuals</span></li>
                <li><b>MAE</b><span>Interpretable, robust to outliers</span></li>
              </ol>
            </div>
            <div class="pane" id="pane-2">
              <h3>Evaluated on the held-out 36 hours</h3>
              <div class="metrics">
                <div class="metric"><span>MAE</span><b id="m-mae">45.8</b><i>users per hour</i></div>
                <div class="metric good"><span>MASE</span><b id="m-mase">0.62</b><i>below 1: beats the naive forecast</i></div>
              </div>
              <p class="small">Below: <code>result.code</code>, the script that produced this forecast. It runs with plain skforecast, without <span class="nw">skforecast-ai</span>.</p>
            </div>
            <div class="pane" id="pane-3">
              <div class="chat">
                <p class="q">Explain the evaluation metrics. Is the MASE good, and what do the predictions look like?</p>
                <p class="a" id="answer" data-text="A MASE of 0.62 is good: below 1, the forecast beats the one-step naive forecast. The predictions miss by 45.8 users per hour on average, and each one comes with an 80% interval."></p>
              </div>
              <p class="small llm-note">The LLM reads the result and explains it. It never changes the forecast, and the dataset never leaves your machine.</p>
            </div>
          </div>
        </div>
        <div class="stage-code" id="stage-code-box"><pre id="stage-code"></pre></div>
      </div>
      <details class="stage-foot">
        <summary>Every number, decision and line of code in this animation is a real skforecast-ai output, not a drawing. <span class="how">How this animation was made</span></summary>
        <p>Hourly users of a bike sharing service in Washington D.C. (the <code>bike_sharing</code> dataset of skforecast, last 2,000 hours), with holiday, weather and temperature as exogenous variables. The profile, the plan and the script come from <code>ForecastingAssistant()</code> without an LLM; the forecast is evaluated on the last 36 hours, held out from training. The answer in step 4 is an example. The chart shows the last week before the forecast.</p>
      </details>
    </div>
  </div>

  <div class="trust">
    <div class="container">
      <div class="row">
        <span>Built on <b>skforecast</b></span>
        <span><b>Same input</b>, same output</span>
        <span>Runs <b>fully offline</b>, the LLM is optional</span>
        <span><b>Any LLM</b> through pydantic-ai</span>
        <span><b>Apache-2.0</b> open-source license</span>
      </div>
    </div>
  </div>

  <section class="block">
    <div class="container">
      <div class="sec-head">
        <span class="kicker">Design</span>
        <h2>Deterministic first, LLM second</h2>
        <p>Forecasting decisions come from rules you can read and reproduce. The language model sits on top: it explains them, and helps you change them when you ask.</p>
        <a class="more" href="{{ 'user-guides/agentic-forecasting.html' | url }}#what-is-skforecast-ai">See it in motion →</a>
      </div>
      <div class="split">
        <article class="side-card engine">
          <span class="tagline">The engine decides</span>
          <h3>Rule-based and reproducible</h3>
          <ul class="ticks">
            <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12l5 5L20 7"/></svg><span><b>Forecaster and estimator</b> from the shape and size of the data.</span></li>
            <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12l5 5L20 7"/></svg><span><b>Lags and window features</b> from the partial autocorrelation and the frequency.</span></li>
            <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12l5 5L20 7"/></svg><span><b>Metric and cross-validation</b> that match the scale of the series and the horizon.</span></li>
            <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12l5 5L20 7"/></svg><span><b>Model ranking</b> as a plain sort of backtesting metrics.</span></li>
          </ul>
          <p class="foot">No LLM needed. The same data always gives the same profile, plan, script and predictions.</p>
        </article>
        <article class="side-card llm">
          <span class="tagline">The LLM explains</span>
          <h3>Optional, and always validated</h3>
          <ul class="ticks">
            <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12l5 5L20 7"/></svg><span><b>Explains</b> any profile, plan, script or result in plain language with <code>ask()</code>.</span></li>
            <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12l5 5L20 7"/></svg><span><b>Refines</b> lags and window features on request with <code>refine_plan()</code>.</span></li>
            <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12l5 5L20 7"/></svg><span><b>Translates</b> a deployment scenario into a backtesting strategy with <code>create_cv()</code>.</span></li>
            <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12l5 5L20 7"/></svg><span><b>Grounded</b> in the skforecast agent skills, picked for each question.</span></li>
          </ul>
          <p class="foot">Its output is checked by a Pydantic model before it touches execution. Your dataset is never sent: profiles carry summary statistics, and a result passed to <code>ask()</code> only its own predictions and metrics, with a warning.</p>
        </article>
      </div>
      <div class="providers">
        <span class="lab">Works with</span>
        <span>OpenAI</span><span>Anthropic</span><span>Google</span><span>Groq</span><span>AWS Bedrock</span><span>Ollama, local</span><span>Any OpenAI-compatible endpoint</span>
        <a href="{{ 'user-guides/llm-configuration.html' | url }}">Configure the LLM →</a>
      </div>
    </div>
  </section>

  <section class="block alt">
    <div class="container code-sec">
      <div>
        <div class="sec-head" style="margin-bottom: 0;">
          <span class="kicker">Code</span>
          <h2>The code you see is the code that ran</h2>
          <p><code>forecast()</code> and <code>backtest()</code> execute the same script that <code>forecast_code()</code> and <code>backtest_code()</code> return. No hidden steps, no lock-in.</p>
        </div>
        <ul class="ticks">
          <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12l5 5L20 7"/></svg><span><b>Inspect it.</b> Every decision of the plan is a line you can read.</span></li>
          <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12l5 5L20 7"/></svg><span><b>Own it.</b> It imports pandas, skforecast and your estimator. Nothing else.</span></li>
          <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12l5 5L20 7"/></svg><span><b>Ship it.</b> Version it, review it and run it in production.</span></li>
        </ul>
      </div>
      <div class="window" aria-label="Script generated by skforecast-ai for the forecast of the animation">
        <div class="window-bar"><i aria-hidden="true"></i><i aria-hidden="true"></i><i aria-hidden="true"></i><span>result.code</span><button type="button" class="copy" id="copy-script" aria-label="Copy script" title="Copy"><span class="cp">{% include ".icons/material/content-copy.svg" %}</span><span class="ok">{% include ".icons/material/check.svg" %}</span></button></div>
        <pre><code id="script"></code></pre>
      </div>
    </div>
  </section>

  <section class="block">
    <div class="container code-sec rev">
      <figure class="board-fig">
        <div class="board" id="board" role="img" aria-label="Leaderboard of three candidate configurations and a seasonal naive baseline ranked by backtesting mean absolute error"></div>
        <figcaption id="board-cap"></figcaption>
      </figure>
      <div>
        <div class="sec-head" style="margin-bottom: 0;">
          <span class="kicker">Model selection</span>
          <h2>Let measured performance pick the model</h2>
          <p><code>compare()</code> backtests every candidate with the same data and the same cross-validation, so the differences come from the models, not from the setup.</p>
          <a class="more" href="{{ 'user-guides/agentic-forecasting.html' | url }}#comparing-forecaster-configurations">See it in motion →</a>
        </div>
        <ul class="ticks">
          <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12l5 5L20 7"/></svg><span><b>Your candidates</b> or the alternatives proposed by the profile.</span></li>
          <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12l5 5L20 7"/></svg><span><b>A ranked leaderboard</b> with a seasonal naive baseline as the reference, and the reproducible code of every row.</span></li>
          <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12l5 5L20 7"/></svg><span><b>The winner</b> ready to forecast. The LLM plays no part in choosing it.</span></li>
        </ul>
      </div>
    </div>
  </section>

  <section class="block alt">
    <div class="container code-sec ask-sec">
      <div>
        <div class="sec-head" style="margin-bottom: 0;">
          <span class="kicker llm">LLM layer, optional</span>
          <h2>Ask why, at any step</h2>
          <p><code>ask()</code> explains a result or a plan in plain language, or answers a general forecasting question, grounded in the skforecast agent skills. It reads the object you pass; it never runs the workflow or changes a parameter.</p>
        </div>
        <ul class="ticks">
          <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12l5 5L20 7"/></svg><span><b>After the results.</b> Forecasts, backtests and comparisons, with their metrics.</span></li>
          <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12l5 5L20 7"/></svg><span><b>Before running anything.</b> Question the plan: its lags, window features and interval.</span></li>
          <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12l5 5L20 7"/></svg><span><b>Your dataset stays local.</b> Only summary statistics and the values a result owns are sent.</span></li>
        </ul>
      </div>
      <figure class="ask-fig">
        {% include "partials/ask-window.html" %}
        <figcaption>Example answers on the data of the animation, from the most common use of <code>ask()</code> to the least.</figcaption>
      </figure>
    </div>
    <div class="container">
      <div class="ways two">
        <article class="way llm">
          <span class="tagline">Refine the plan</span>
          <h3>Your domain knowledge, as lags and window features</h3>
          <pre class="snip"><code data-hl>plan = assistant.refine_plan(
    profile, plan,
    prompt="Demand peaks at rush hour and is "
           "similar to the same hour last week.",
)</code></pre>
          <p>The LLM proposes the features, a Pydantic model validates them and the deterministic engine builds the plan. If the proposal is not valid, you get the deterministic plan and a warning.</p>
          <a class="more" href="{{ 'user-guides/agentic-forecasting-step-by-step.html' | url }}#refine-the-plan-optional">Refine the plan →</a>
        </article>
        <article class="way llm">
          <span class="tagline">Describe the deployment</span>
          <h3>A scenario in plain words, as a backtesting strategy</h3>
          <pre class="snip"><code data-hl>cv = assistant.create_cv(
    profile, plan,
    prompt="Train once on data up to August "
           "and forecast 36 hours ahead.",
)</code></pre>
          <p>The answer becomes the parameters of a skforecast <code>TimeSeriesFold</code>, validated before the backtest runs. If they are not valid, the deterministic strategy is used, with a warning.</p>
          <span class="more-row">
            <a class="more" href="{{ 'user-guides/agentic-forecasting-step-by-step.html' | url }}#define-the-backtesting-strategy">Backtesting strategy →</a>
            <a class="more" href="{{ 'quick-start/ask-the-assistant.html' | url }}#describe-how-the-model-will-be-deployed">See it in motion →</a>
          </span>
        </article>
      </div>
    </div>
  </section>

  <section class="block">
    <div class="container">
      <div class="sec-head">
        <span class="kicker">Workflows</span>
        <h2>One call, or every step in your hands</h2>
        <p>The same engine behind three entry points. Each step returns an object you can inspect, change and pass on.</p>
      </div>
      <div class="ways">
        <article class="way">
          <span class="tagline">Fast path</span>
          <h3>From data to forecast in one call</h3>
          <pre class="snip"><code data-hl>assistant = ForecastingAssistant()
result = assistant.forecast(
    data, target="y", steps=12
)
result.predictions
result.code</code></pre>
          <a class="more" href="{{ 'user-guides/agentic-forecasting.html' | url }}">Agentic forecasting →</a>
        </article>
        <article class="way">
          <span class="tagline">Step by step</span>
          <h3>Review every decision</h3>
          <pre class="snip"><code data-hl>profile = assistant.profile(
    data, target="y"
)
plan = assistant.plan(profile, steps=12)
cv = assistant.create_cv(profile, plan)
result = assistant.backtest(
    data, cv, profile=profile, plan=plan
)</code></pre>
          <a class="more" href="{{ 'user-guides/agentic-forecasting-step-by-step.html' | url }}">Step by step guide →</a>
        </article>
        <article class="way">
          <span class="tagline">Terminal</span>
          <h3>The same pipeline from the CLI</h3>
          <pre class="snip sh"><code><span class="tk-m">$</span> skforecast-ai forecast data.csv \
    --target y --steps 12

<span class="tk-m">$</span> skforecast-ai forecast-code data.csv \
    --target y --steps 12 \
    --output forecast.py</code></pre>
          <a class="more" href="{{ 'user-guides/cli-usage.html' | url }}">Using the CLI →</a>
        </article>
      </div>
    </div>
  </section>

  <section class="block alt">
    <div class="container">
      <div class="sec-head">
        <span class="kicker">Learn</span>
        <h2>Start here</h2>
      </div>
      <div class="learn">
        <a href="{{ 'quick-start/how-to-install.html' | url }}"><b>Installation</b><span>Install the package, with or without the LLM layer, and check the setup.</span></a>
        <a href="{{ 'quick-start/first-forecast.html' | url }}"><b>Your first forecast</b><span>From raw data to a validated forecast, step by step.</span></a>
        <a href="{{ 'quick-start/ask-the-assistant.html' | url }}"><b>Ask the assistant</b><span>Connect an LLM to explain results, refine the plan and describe the deployment.</span></a>
        <a href="{{ 'api/assistant.html' | url }}"><b>API reference</b><span>Every method of <code>ForecastingAssistant</code> and its results.</span></a>
      </div>
    </div>
  </section>

  <section class="block">
    <div class="container backed">
      <div>
        <div class="sec-head" style="margin-bottom: 24px;">
          <span class="kicker">Ecosystem</span>
          <h2>Part of the skforecast family</h2>
          <p>skforecast-ai grows alongside skforecast, the open-source library that runs every forecast.</p>
        </div>
        <div class="family">
          <a href="https://skforecast.org/"><span class="fam-logo"><img class="on-light" src="{{ 'img/logo-skforecast-backgound.png' | url }}" alt="" width="48" height="48"><img class="on-dark" src="{{ 'img/logo-skforecast-white-no-backgound.png' | url }}" alt="" width="48" height="48"></span><span class="fam-text"><b>skforecast</b><span>The forecasting library: machine learning, statistical and foundation models, backtesting and tuning.</span></span></a>
          <a href="https://studio.skforecast.org/"><span class="fam-logo fam-icon">{% include ".icons/material/cursor-default-click-outline.svg" %}</span><span class="fam-text"><b>Skforecast Studio</b><span>Build and evaluate forecasting models visually, without code.</span></span></a>
        </div>
        <div class="community" style="margin-top: 22px;">
          <a class="sponsor" href="https://skforecast.org/latest/more/funding.html"><span class="ico">{% include ".icons/octicons/heart-16.svg" %}</span>Sponsor</a>
          <a class="discord" href="https://discord.gg/3V52qpNkuj"><span class="ico">{% include ".icons/fontawesome/brands/discord.svg" %}</span>Discord</a>
          <a class="linkedin" href="https://www.linkedin.com/company/skforecast/"><span class="ico">{% include ".icons/fontawesome/brands/linkedin.svg" %}</span>LinkedIn</a>
        </div>
      </div>
      <div class="cite">
        <div class="sec-head" style="margin-bottom: 8px;">
          <span class="kicker">Research</span>
          <h2>Cite skforecast-ai</h2>
          <p>If you use skforecast-ai in a scientific publication, please cite the version you used.</p>
        </div>
        <pre>Amat Rodrigo, J., &amp; Escobar Ortiz, J. skforecast-ai [Computer software].
https://doi.org/10.5281/zenodo.21338159</pre>
        <p style="font-size: 14px;">This DOI always resolves to the latest release. Each version has its own DOI and ready-made citations on <a href="https://doi.org/10.5281/zenodo.21338159">Zenodo</a>. The citation metadata is also in <a href="https://github.com/skforecast/skforecast-ai/blob/main/CITATION.cff">CITATION.cff</a>, which GitHub offers as "Cite this repository".</p>
        <details>
          <summary>BibTeX</summary>
          <div class="inner"><pre>@software{skforecast-ai,
  author  = {Amat Rodrigo, Joaquin and Escobar Ortiz, Javier},
  title   = {skforecast-ai},
  license = {Apache-2.0},
  url     = {https://ai.skforecast.org/},
  doi     = {10.5281/zenodo.21338159}
}</pre></div>
        </details>
      </div>
    </div>
    <div class="container team">
      <div class="team-head">
        <h3>Built and maintained by</h3>
        <a href="{{ 'more/about-skforecast-ai.html' | url }}">About skforecast-ai →</a>
      </div>
      {% include "partials/team.html" %}
    </div>
    <div class="container">
      <p class="legal">skforecast-ai software: <a href="https://github.com/skforecast/skforecast-ai/blob/main/LICENSE">Apache License 2.0</a>. The underlying skforecast engine is distributed under its own <a href="https://github.com/skforecast/skforecast/blob/main/LICENSE">BSD-3-Clause License</a>. Documentation: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>. The skforecast trademark is registered with the European Union Intellectual Property Office (EUIPO) under application number 019109684. Unauthorized use of this trademark, its logo, or any associated visual identity elements is prohibited without the express consent of the owner.</p>
    </div>
  </section>
</div>
{% endblock %}