{% extends "nextcloud/base.html" %}

{% load static i18n %}

{% block css_extra %}
    <link
    href="{% static 'nextcloud/css/owl.carousel.min.css' %}"
    rel="stylesheet"
    type="text/css"
    />
{% endblock %}

{% block navbar %}
    {% with transparent_header=True %}
        {{ block.super }}
    {% endwith %}
{% endblock %}

{% block main %}
<!-- Content
  ============================================= -->
  <div id="content"> 
    
    <!-- calculator
    ============================================= -->
    <section class="hero-wrap">
      <div class="hero-mask opacity-6 bg-dark"></div>
      <div class="hero-bg" style="background-image:url({% static 'nextcloud/images/background-image.jpg' %});"></div>
      <div class="hero-content d-flex fullscreen">
        <div class="container my-auto py-5">
          <div class="row mt-4 pt-5">
            <div class="col-lg-6 col-xl-7 my-auto text-center text-lg-left pb-4 pb-lg-0">
              <h2 class="text-14 font-weight-400 text-white mb-4">Secure<br class="d-none d-xl-block">
                DATA STORAGE<br class="d-none d-xl-block">ZERO CARBON CLOUD</h2>
              <p class="lead text-light mb-4">Create & Host your instances in minutes with great rates and low
                fees. Own your data.</p>
              <a href="#" class="btn-link text-4">See more details<i class="fas fa-chevron-right text-2 ml-2"></i></a> </div>
              {% include "nextcloud/includes/_calculator_form.html"  %}
          </div>
        </div>
      </div>
    </section>
    <!-- calculator --> 

  </div>
  <!-- Content end --> 

{% endblock %}

{% block js_extra %} 
<script src="{% static 'nextcloud/js/owl.carousel.min.js' %}"></script>
<script src="{% static 'nextcloud/js/main.js' %}"></script>
{% endblock %}