{% extends "base.html" %}
{% load static i18n %}
{% load tz %}
{% get_current_timezone as TIME_ZONE %}

{% block content %}
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>About</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="{% url 'home' %}">Home</a></li>
              <li class="breadcrumb-item"><a href="{% url 'about' %}">About</a></li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="row">
        {# <div class="col-12"> #}
        <div class="col-md-6">
            
            <div class="card card-primary">
              <div class="card-header">
                <h3 class="card-title">About Cerberus</h3>
              </div>
              <!-- /.card-header -->
              <div class="card-body">
                <strong><i class="fa fa-lock mr-1"></i> Protect</strong>
                
                <p class="text-muted"><strong>Firewall</strong>: A Linux firewall protects all your devices from external and internal threats.</p>
                <p class="text-muted"><strong>Pihole</strong>: Block ads and malicious domains across all your devices.</p>
                <p class="text-muted"><strong>DNScrypt</strong>: Verify the domains you visit with a secure protocol.</p> 
                <p class="text-muted"><strong>Coppercloud</strong>: Block telemetry and information collecting services by blocking their IP addresses.</p>
                <p class="text-muted"><strong>Metrics</strong>: View data about the threat actors sending unsolicited traffic to your Cerberus. 

                <hr>

                <strong><i class="fa fa-address-book mr-1"></i> Connect</strong>
                
                <p class="text-muted"><strong>Wireguard</strong>: Easily configure and add devices with a modern, secure, and performant virtual private network.</p>
                
                <hr>

                <strong><i class="fa fa-share-alt mr-1"></i> Share</strong>

                <p class="text-muted"><strong>Extra Services</strong>: Use powerful open source technologies to share and collaborate with your own services for a virtual private cloud, file syncing, media server, home automation, and much more.</p>

              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
            
        
            {% if request.user.is_superuser %}
            
            <!-- Credentials -->
            <div class="card card-primary">
              <div class="card-header">
                <h3 class="card-title">Cerberus Admin (Django)</h3>
              </div>
              <!-- /.card-header -->
              <div class="card-body">
                <strong><i class="fas fa-book mr-1"></i> Username</strong>
                
                <p class="text-muted">admin</p>

                <hr>

                <strong><i class="fas fa-map-marker-alt mr-1"></i> Password</strong>

                <p class="text-muted">None (authenticates based on Wireguard profile)</p>

              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
        
            <!-- Cockpit -->
            <div class="card card-primary">
              <div class="card-header">
                <h3 class="card-title">Cockpit</h3>
              </div>
              <!-- /.card-header -->
              <div class="card-body">
                <strong><i class="fas fa-book mr-1"></i> Username</strong>
                
                <p class="text-muted">cockpit</p>

                <hr>

                <strong><i class="fas fa-map-marker-alt mr-1"></i> Password</strong>

                <p class="text-muted">(Default Cerberus Password)</p>

              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
            
            <!-- Pihole -->
            <div class="card card-primary">
              <div class="card-header">
                <h3 class="card-title">Pihole</h3>
              </div>
              <!-- /.card-header -->
              <div class="card-body">

                <strong><i class="fas fa-map-marker-alt mr-1"></i> Password</strong>

                <p class="text-muted">(Default Cerberus Password)</p>

              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
            
            {% endif %}
        
        </div>
        <!-- /.col (LEFT) -->
        
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>
    <!-- /.content -->
{% endblock content %}