{% load i18n %}
<footer id="footer" class="pb-4 bg-dark-3 footer-text-light border-0">
    <div class="container">
      <div class="row">
        <div class="col-sm-6 col-md mb-3 mb-md-0">
          <h4 class="text-3 text-white text-uppercase font-weight-400 mb-3">{% trans "Information" %}</h4>
          <ul class="nav flex-column">
            <li class="nav-item"> <a class="nav-link" href="#">{% trans "About Us" %}</a></li>
            <li class="nav-item"> <a class="nav-link" href="{% url 'nextcloud:pricing' %}">{% trans "Subscription Plans" %}</a></li>
            <li class="nav-item"> <a class="nav-link" href="{% url 'nextcloud:pricing' %}">{% trans "Fees" %}</a></li>
          </ul>
        </div>
        <div class="col-sm-6 col-md mb-3 mb-md-0">
          <h4 class="text-3 text-white text-uppercase font-weight-400 mb-3">{% trans "Services" %}</h4>
          <ul class="nav flex-column">
            <li class="nav-item"> <a class="nav-link" href="#">{% trans "Reserve NextCloud Instances" %}</a></li>
            <li class="nav-item"> <a class="nav-link" href="#">{% trans "Add Credit" %}</a></li>
            <li class="nav-item"> <a class="nav-link" href="#">{% trans "Pay bill" %}</a></li>
          </ul>
        </div>
        <div class="col-sm-6 col-md mb-3 mb-md-0">
          <h4 class="text-3 text-white text-uppercase font-weight-400 mb-3">{% trans "Help Center" %}</h4>
          <ul class="nav flex-column">
            <li class="nav-item"> <a class="nav-link" href="#">{% trans "Contact Us" %}</a></li>
            <li class="nav-item"> <a class="nav-link" href="#">{% trans "Support" %}</a></li>
            <li class="nav-item"> <a class="nav-link" href="#">{% trans "Help" %}</a></li>
          </ul>
        </div>
        <div class="col-sm-6 col-md mb-3 mb-md-0">
          <h4 class="text-3 text-white text-uppercase font-weight-400 mb-3">{% trans "Keep in touch" %}</h4>
          <ul class="nav flex-column">
            <li class="nav-item"> <a class="nav-link" href="#">facebook</a></li>
            <li class="nav-item"> <a class="nav-link" href="#">twitter</a></li>
            <li class="nav-item"> <a class="nav-link" href="#">google</a></li>
            <li class="nav-item"> <a class="nav-link" href="#">youtube</a></li>
          </ul>
        </div>
        <div class="col-12 col-lg-3">
          <h4 class="text-3 text-white text-uppercase font-weight-400 mb-3">{% trans "Subscribe" %}</h4>
          <p>{% trans "Subscribe to receive latest news and updates." %}</p>
          <div class="input-group newsletter">
            <input class="form-control" placeholder="Your Email Address" name="newsletterEmail" id="newsletterEmail" type="text">
            <span class="input-group-append">
            <button class="btn btn-secondary" type="submit" data-toggle="tooltip" data-original-title="Subscribe"><i class="fas fa-paper-plane"></i></button>
            </span> </div>
        </div>
      </div>
    </div>
    <div class="footer-copyright pt-4 mt-4">
      <div class="container">
        <div class="row">
          <div class="col-lg">
            <p class="text-center text-lg-left mb-2 mb-lg-0">Copyright &copy; ungleich glarus ag {% now "Y" %}. {% trans "All Rights Reserved" %}</p>
          </div>
          <div class="col-lg d-lg-flex align-items-center justify-content-lg-end">
            <ul class="nav justify-content-center">
              <li class="nav-item"> <a class="nav-link active" href="#">{% trans "Security" %}</a></li>
              <li class="nav-item"> <a class="nav-link" href="#">{% trans "Terms of Service" %}</a></li>
              <li class="nav-item"> <a class="nav-link" href="#">{% trans "Privacy" %}</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </footer>
