{% extends 'uncloud/base.html' %}
{% block title %}Welcome to uncloud [beta]{% endblock %}

{% block bootstrap5_content %}
<div class="container">
  <div id="content">
    <div id="intro" class="row">
      <div class=col>
        <h1>Welcome to uncloud [beta]</h1>
      </div>
    </div>

    <div id="about" class="row">
      <div class="col"><h3>About uncloud</h3></div>
      <div class="col-8">
        <p>
          Welcome to uncloud, the Open Source cloud management
          system by <a href="https://ungleich.ch">ungleich</a>.
          It is an <a href="{% url 'api-root' %}">API</a> driven system with
          some convience views provided by
          the <a href="https://www.django-rest-framework.org/">Django Rest
            Framework</a>. You can
          freely <a href="https://code.ungleich.ch/uncloud/uncloud/">access
            the source code of uncloud</a>.
          <strong>This is a BETA service.</strong> As such, some
          functionality might not be very sophisticated.
        </p>
      </div>
    </div>
    <div id="howto" class="row">
      <div class="col"><h3>Getting started</h3></div>
      <div class="col-8">
        <p>uncloud is designed to be as easy as possible to use. However,
          there are some "real world" requirements that need to be met to
          start using uncloud:

          <ul>
            <li>First you need
              to <a href="https://account.ungleich.ch">register an
                account</a>. If you already have one, you can
              <a href="{% url 'account_login' %}">login</a>.
            <li>If you have forgotten your password or other issues with
              logging in, you can contact the ungleich support
              via <strong>support at ungleich.ch</strong>.

            <li>Secondy you will need to
              <a href="{% url 'billingaddress-list' %}">create a billing
                address</a>. This is required for determining the correct
              tax.
            <li>Next you will need to
              <a href="{% url 'cc_register' %}">register a credit card</a>
              from which payments can be made. Your credit card will not
              be charged without your consent.
          </ul>
      </div>
    </div>
    <div id="howto" class="row">
      <div class="col"><h3>Introduction to uncloud concepts</h3></div>
      <div class="col-8">
        <p>We plan to offer many services on uncloud ranging from
          for free, for a small amount or regular charges. As transfer
          fees are a major challenge for our business, we based uncloud
          on the <strong>pre-paid account model</strong>. Which means
          that you can charge your account and then use your balance to
          pay for product usage.</p>
      </div>
    </div>

    <div id="creditcards" class="row">
      <div class="col"><h3>Credit cards</h3></div>
      <div class="col-8">
        <p>
          Credit cards are registered with stripe. We only save a the
          last 4 digits and the expiry date of the card to make
          identification for you easier.
        </p>
        <ul>
          <li><a href="{% url 'cc_register' %}">Register a credit card</a>
            (this is required to be done via Javascript so that we never see
            your credit card, but it is sent directly to stripe)
          <li><a href="{% url 'stripecreditcard-list' %}">You can list your
              credit cards</a>
            By default the first credit card is used for charging
            ("active: true") and later added cards will not be
            used. To change this, first disable the active flag and
            then set it on another credit card.
      </div>
    </div>
    <div id="pay" class="row">
      <div class="col"><h3>Billing Address, Payments and Balance</h3></div>
      <div class="col-8">
        <p>Billing addresses behave similar to credit cards: you can
          have many of them, but only one can be active. The active
          billing address is taken for creating new orders.</p>

        <p>In uncloud we use the pre-paid model: you can add money to
          your account via payments. You can always check your
          balance. The products you use will automatically be charged from
          your existing balance.
        </p>

        <p>In the future you will be able opt-in to automatically
          recharging your account at a certain time frame or whenever it
          is below a certain amount</p>


        <ul>
          <li><a href="{% url 'billingaddress-list' %}">Create or list
              your billing addresses</a>
          <li><a href="{% url 'orders-list' %}">List your Orders</a>
          <li><a href="{% url 'bills-list' %}">List your Bills</a>
          <li><a href="{% url 'payment-list' %}">Make a payment or list your payments</a>
          <li><a href="{% url 'payment-balance-list' %}">Show your balance</a>
          <li><a href="{% url 'machines-list' %}">Show your VM Instances</a>
        </ul>
      </div>
    </div>

    <div id="net" class="row">
      <div class="col"><h3>Networking</h3></div>
      <div class="col-8">
        <p>
          With uncloud you can use a variety of network related
          services.
        </p>

        <ul>
          <li>You can <a href="{% url 'wireguardvpnnetwork-list' %}">list or
              create VPNs</a>  based on wireguard
            <ul>
              <li>Checkout
                <a href="{% url 'wireguardvpnnetworksizes-list' %}">which
                  network sizes are available</a> at the moment.
            </ul>
        </ul>
      </div>
    </div>

    <div id="net" class="row">
      <div class="col"><h3>Current limitations</h3></div>
      <div class="col-8">
        <ul>
          <li>Payments are only possible in CHF.
        </ul>
      </div>
    </div>
    {% if user.is_authenticated %}
    <div id="account-settings" class="row">
      <div class="col"><h3>Account Settings</h3></div>
      <div class="col-8">
        <ul>
          <form method="POST">
            {% csrf_token %}
            <fieldset class="form-group">
                <legend class="border-bottom mb-4">Delete User Account</legend>
                    <p>Are you sure you want to delete your account?  This will permanently delete your
                       profile and any orders you have generated.</p>
                    {{ delete_form }}
            </fieldset>
            <div class="form-group">
              <button class="btn btn-danger btn-lg" type="submit" name="action">Delete Account</button>
            </div>
          </form>
        </ul>
      </div>
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}