<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% if page_title %}{{page_title}} | {% endif %}wireguard-webadmin</title>

    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="/static/AdminLTE-3.2.0/plugins/fontawesome-free/css/all.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <!-- Tempusdominus Bootstrap 4 -->
    <link rel="stylesheet" href="/static/AdminLTE-3.2.0/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
    <!-- iCheck -->
    <link rel="stylesheet" href="/static/AdminLTE-3.2.0/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
    <!-- JQVMap -->
    <link rel="stylesheet" href="/static/AdminLTE-3.2.0/plugins/jqvmap/jqvmap.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/static/AdminLTE-3.2.0/dist/css/adminlte.min.css">
    <!-- overlayScrollbars -->
    <link rel="stylesheet" href="/static/AdminLTE-3.2.0/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
    <!-- Daterange picker -->
    <link rel="stylesheet" href="/static/AdminLTE-3.2.0/plugins/daterangepicker/daterangepicker.css">
    <!-- summernote -->
    <link rel="stylesheet" href="/static/AdminLTE-3.2.0/plugins/summernote/summernote-bs4.min.css">

    <style>
        .min-width {
            width: 1%;
            white-space: nowrap;
        }
        .preloader{
            display: none;
        }
    </style>
    <style>
        .wrapper {
            max-width: 1400px !important;
            margin: 0 auto;
        }

        body.layout-boxed {
            background: radial-gradient(circle at center, #444 0%, #ccc 80%, #fff 100%);
        }
        body.layout-boxed .wrapper {
            background-color: #fff;
            box-shadow: 0 0 15px rgba(0,0,0,0.2);
        }
    </style>


    {% block page_custom_head %}{% endblock%}
</head>
{% load custom_tags %}
{% tag_webadmin_version as webadmin_version %}

<body class="hold-transition sidebar-mini layout-boxed {% if request.COOKIES.sidebarState == 'collapsed' %}sidebar-collapse{% endif %}">
<div class="wrapper">

  <!-- Preloader -->
  <div class="preloader flex-column justify-content-center align-items-center">
  </div>

  <!-- Navbar -->
  <nav class="main-header navbar navbar-expand navbar-white navbar-light">
    <!-- Left navbar links -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
      </li>
      <li class="nav-item d-none d-sm-inline-block">
        <a href="/status/" class="nav-link">Status</a>
      </li>
    </ul>

    <!-- Right navbar links -->
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a href="/accounts/logout/" class="nav-link">
            <i class="fas fa-sign-out-alt"></i>
        </a>
      </li>
    </ul>
  </nav>
  <!-- /.navbar -->

  <!-- Main Sidebar Container -->
  <aside class="main-sidebar sidebar-dark-primary elevation-4">
    <!-- Brand Logo -->
    <a href="/" class="brand-link">
      <span class="brand-text font-weight-light">wireguard-webadmin</span>
    </a>

    <!-- Sidebar -->
    <div class="sidebar">
      <!-- Sidebar Menu -->
      <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
                <!-- Add icons to the links using the .nav-icon class with font-awesome or any other icon font library -->

                <li class="nav-item">
                    <a href="/status/" class="nav-link {% if '/status/' in request.path %}active{% endif %}">
                      <i class="fas fa-tachometer-alt nav-icon"></i>
                      <p>
                        Status
                      </p>
                    </a>
                </li>

                <li class="nav-item">
                    <a href="/peer/list/" class="nav-link {% if '/peer/' in request.path %}active{% endif %}">
                      <i class="fas fa-users-cog nav-icon"></i>
                      <p>
                        Peers
                      </p>
                    </a>
                </li>
        
                <li class="nav-item">
                    <a href="/dns/" class="nav-link {% if '/dns/' in request.path %}active{% endif %}">
                      <i class="fas fa-address-book nav-icon"></i>
                      <p>
                        DNS
                      </p>
                    </a>
                </li>

              <li class="nav-item">
                  <a href="/firewall/rule_list/" class="nav-link {% if '/firewall/' in request.path %}active{% endif %}">
                    <i class="fas fa-shield-alt nav-icon"></i>
                    <p>
                      Firewall
                      
                    </p>
                  </a>
              </li>

                <li class="nav-item">
                    <a href="/console/" class="nav-link {% if '/console/' in request.path %}active{% endif %}">
                      <i class="fas fa-terminal nav-icon"></i>
                      <p>
                        Console
                      </p>
                    </a>
                </li>

                <li class="nav-item">
                    <a href="/user/list/" class="nav-link {% if '/user/' in request.path %}active{% endif %}">
                      <i class="fas fa-users nav-icon"></i>
                      <p>
                        User Manager
                      </p>
                    </a>
                </li>

                <li class="nav-item">
                  <a href="/server/manage/" class="nav-link {% if '/server/' in request.path %}active{% endif %}">
                    <i class="fas fa-cogs nav-icon"></i>
                    <p>
                      Server Settings
                    </p>
                  </a>
              </li>
                
          
        </ul>
      </nav>
      <!-- /.sidebar-menu -->
    </div>
    <!-- /.sidebar -->
  </aside>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        {% if page_title %}
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0">{{ page_title }}</h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="/">Home</a></li>
              {% if breadcrumb %}
                <li class="breadcrumb-item active">
                    {%if breadcrumb.level2.href%}
                        <a href="{{ breadcrumb.level2.href }}">{{ breadcrumb.level2.title }}</a>
                    {%else%}
                        {{breadcrumb.level2.title}}
                    {%endif%}
                </li>

            {% endif %}

              <li class="breadcrumb-item active">{{ page_title }}</li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
        {% endif %}
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

<!-- Generic Modal Structure -->
<div class="modal fade" id="genericModal" tabindex="-1" aria-labelledby="genericModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="genericModalLabel">Modal Title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="genericModalBody">
        <!-- Content will be loaded here -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal" id="genericModalCloseButton">Close</button>
        <a href="#" class="btn btn-primary" id="genericModalActionButton">Action</a>
      </div>
    </div>
  </div>
</div>

<!-- End modal -->

    <!-- Main content -->




    <section class="content">
        <div class="container-fluid">
          {% if pending_changes_warning %}
            <div class="alert alert-warning" role="alert">
                <h4 class="alert-heading">Update Required</h4>
                <p>Your WireGuard settings have been modified. To apply these changes, please update the configuration and reload the WireGuard service.
                </p>
                <p>
                  <a href="/tools/export_wireguard_config/?action=update_and_restart" class="btn btn-secondary">Update and restart service</a>
              </p>
              
            </div>
          {% endif %}
        
        
          

            {% block content %}{% endblock %}
        </div><!-- /.container-fluid -->
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
  <footer class="main-footer">
    {% if webadmin_version.update_available %}<a class='btn btn-sm btn-danger' id="btn_update_changelog">Update Available</a>{% else %}wireguard-webadmin {% endif %}
    <div class="float-right d-none d-sm-inline-block">
      <b>Version</b> {{ webadmin_version.current_version }} 
    </div>
  </footer>

  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-dark">
    <!-- Control sidebar content goes here -->
  </aside>
  <!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->

<!-- jQuery -->
<script src="/static/AdminLTE-3.2.0/plugins/jquery/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="/static/AdminLTE-3.2.0/plugins/jquery-ui/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
  $.widget.bridge('uibutton', $.ui.button)
</script>
<!-- Bootstrap 4 -->
<script src="/static/AdminLTE-3.2.0/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- ChartJS -->
<script src="/static/AdminLTE-3.2.0/plugins/chart.js/Chart.min.js"></script>
<!-- Sparkline -->
<script src="/static/AdminLTE-3.2.0/plugins/sparklines/sparkline.js"></script>
<!-- JQVMap -->
<script src="/static/AdminLTE-3.2.0/plugins/jqvmap/jquery.vmap.min.js"></script>
<script src="/static/AdminLTE-3.2.0/plugins/jqvmap/maps/jquery.vmap.usa.js"></script>
<!-- jQuery Knob Chart -->
<script src="/static/AdminLTE-3.2.0/plugins/jquery-knob/jquery.knob.min.js"></script>
<!-- daterangepicker -->
<script src="/static/AdminLTE-3.2.0/plugins/moment/moment.min.js"></script>
<script src="/static/AdminLTE-3.2.0/plugins/daterangepicker/daterangepicker.js"></script>
<!-- Tempusdominus Bootstrap 4 -->
<script src="/static/AdminLTE-3.2.0/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
<!-- Summernote -->
<script src="/static/AdminLTE-3.2.0/plugins/summernote/summernote-bs4.min.js"></script>
<!-- overlayScrollbars -->
<script src="/static/AdminLTE-3.2.0/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
<!-- AdminLTE App -->
<script src="/static/AdminLTE-3.2.0/dist/js/adminlte.js"></script>

<script>
  $(document).ready(function() {
    const webadminVersion = '{{ webadmin_version.current_version }}'; 

    $('#btn_update_changelog').on('click', function() {
        $.ajax({
            url: `https://updates.eth0.com.br/api/application_changelog/?app=wireguard_webadmin&version=${webadminVersion}`,
            type: 'GET',
            success: function(response) {
                const updates = response.updates.sort((a, b) => new Date(b.release_date) - new Date(a.release_date));
                let updatesHtml = '';
                updates.forEach(update => {
                    updatesHtml += `<div class="update">
                                        <h5>Version ${update.version}</h5>
                                        <p>${update.release_notes.replace(/\r\n/g, "<br>")}</p>
                                    </div>`;
                });

                // Update modal content
                $('#genericModalLabel').text('Wireguard Webadmin Updates');
                $('#genericModalBody').html(updatesHtml);
                $('#genericModalCloseButton').text('Close');
                $('#genericModalActionButton').text('Update Instructions').attr('href', 'https://github.com/eduardogsilva/wireguard_webadmin').attr('target', '_blank');
                
                // Show modal
                $('#genericModal').modal('show');
            },
            error: function(xhr, status, error) {
                // Update modal for error display
                $('#genericModalLabel').text('Error');
                $('#genericModalBody').html('<p>An error occurred while fetching the update information. Please try again later.</p>');
                $('#genericModalCloseButton').text('Close');
                $('#genericModalActionButton').hide(); // Hide the action button in case of error
                
                // Show modal
                $('#genericModal').modal('show');
                console.error("An error occurred while fetching updates: ", error);
            }
        });
    });
});


</script>

{% include "template_messages.html" %}

<script>
    function setCookie(name, value, days) {
        var expires = "";
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days*24*60*60*1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + (value || "")  + expires + "; path=/";
    }
</script>

<script>
    function getCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for(var i=0;i < ca.length;i++) {
            var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1,c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
        }
        return null;
    }
</script>

<script>
    $(document).ready(function() {
        var sidebarState = getCookie('sidebarState');
        if (sidebarState === 'collapsed') {
            $('body').addClass('sidebar-collapse');
        }

        $('[data-widget="pushmenu"]').on('click', function(event) {
            event.preventDefault();
            setTimeout(function() {
                if ($('body').hasClass('sidebar-collapse')) {
                    setCookie('sidebarState', 'collapsed', 7);
                } else {
                    setCookie('sidebarState', 'opened', 7);
                }
            }, 500);
        });
    });
</script>

{% block custom_page_scripts %}

{% endblock %}

</body>
</html>