<!DOCTYPE html>
<html lang="{{ locale }}">
  <head>
    {{ include('shared.head') }}
    <link rel="preload" as="image" href="{{ home_pic_url }}">
    <title>{{ site_name }}</title>
    <style>
      .hp-wrapper {
        {% if fixed_bg %}
          background-color: rgba(0, 0, 0, 0);
        {% else %}
          background-image: url('{{ home_pic_url }}');
        {% endif %}
      }
    </style>
    {{ include('assets.home-css', ignore_missing = true) }}
    <link rel="prefetch" as="script" href="https://cdn.jsdelivr.net/npm/react@17.0.1/umd/react.production.min.js" crossorigin="anonymous">
    <link rel="prefetch" as="script" href="https://cdn.jsdelivr.net/npm/react-dom@17.0.1/umd/react-dom.production.min.js" crossorigin="anonymous">
  </head>

  <body class="hold-transition layout-top-nav">
    <div class="hp-wrapper">
      {% if fixed_bg %}
        <div id="fixed-bg" style="background-image: url('{{ home_pic_url }}')"></div>
      {% endif %}

      <nav class="navbar navbar-expand fixed-top navbar-{{ navbar_color }} navbar-{{ color_mode }}
        ml-0 {{ transparent_navbar ? 'transparent' }}"
      >
        <div class="container">
          <div class="navbar-header">
            <a href="{{ url('/') }}" class="navbar-brand">{{ site_name }}</a>
          </div>

          <div class="navbar-custom-menu">
            <ul class="nav navbar-nav">
              <li class="nav-item">
                <a class="nav-link" href="{{ url('skinlib') }}">{{ trans('general.skinlib') }}</a>
              </li>

              {{ include('shared.languages') }}

              {% if auth_check() %}
                {{ include('shared.user-menu') }}
              {% else %}
                <li class="nav-item">
                  <a class="nav-link" href="{{ url('auth/login') }}">
                    <i class="icon fas fa-sign-in-alt"></i>
                    {{ trans('general.login') }}
                  </a>
                </li>
              {% endif %}
            </ul>
          </div>
        </div>
      </nav>

      <div class="container">
        <div class="splash">
          <h1 class="splash-head">{{ site_name }}</h1>
          <p class="splash-subhead">
            {{ site_description }}
          </p>
          <p>
            {% if auth_check() %}
              <a href="{{ url('user') }}" class="main-button">
                {{ trans('general.user-center') }}
              </a>
            {% else %}
              <a href="{{ url('auth/register') }}" class="main-button">
                {{ trans('general.register') }}
              </a>
            {% endif %}
          </p>
        </div>
      </div>

      {% if hide_intro %}
        <div id="copyright" class="without-intro">
          <div class="container">
            {{ include('shared.copyright') }}
          </div>
        </div>
      {% endif %}
    </div>

    {% if not hide_intro %}
      <div id="intro">
        <div class="container">
          <div class="text-center">
            <h1>{{ trans('index.features.title') }}</h1>
            <br>
            <br>
            <div class="container-lg">
              <div class="row">
                {% for item in ['first', 'second', 'third'] %}
                  <div class="col-lg">
                    <i class="fas {{ trans("index.features.#{item}.icon") }} mb-3" aria-hidden="true"></i>
                    <h3>{{ trans("index.features.#{item}.name") }}</h3>
                    <p>{{ trans("index.features.#{item}.desc")|raw }}</p>
                  </div>
                {% endfor %}
              </div>
            </div>
          </div>
          <br>
        </div>
      </div>
      <div id="footer-wrap">
        <div class="container">
          <div class="row">
            <div class="col-lg-6 mb-2">
              {{ trans('index.introduction', {sitename: site_name}) }}
            </div>
            <div class="col-lg-4"></div>
            <div class="col-lg-2 d-flex justify-content-center align-items-center">
              <a href="{{ url('auth/register') }}" class="main-button">
                {{ trans('index.start') }}
              </a>
            </div>
          </div>
        </div>
      </div>
      <div id="copyright" class="with-intro">
        <div class="container">
          {{ include('shared.copyright') }}
        </div>
      </div>
    {% endif %}

    <div id="modal-logout" class="modal fade" tabindex="-1" role="dialog">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">{{ trans('general.notice') }}</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <p>{{ trans('front-end.general.confirmLogout') }}</p>
          </div>
          <div class="modal-footer">
            <button class="btn btn-secondary" data-dismiss="modal">{{ trans('general.cancel') }}</button>
            <button class="btn btn-primary" id="btn-logout">{{ trans('front-end.general.confirm') }}</button>
          </div>
        </div>
      </div>
    </div>

    <script type="application/json" id="blessing-extra">
      {{ {transparent_navbar: transparent_navbar}|json_encode|raw }}
    </script>
    {{ include('assets.home', ignore_missing = true) }}
    {{ include('shared.foot') }}
  </body>
</html>
