<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>/etc/hosts file manager</title>
  <!-- Dodajemy FontAwesome dla ikon -->
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
  <style>
    body { font-family: Arial, sans-serif; background: #f1f1f1; margin: 0; padding: 0; }
    .container { max-width: 800px; margin: 40px auto; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px #ccc; }
    h1 { text-align: center; margin-bottom: 1em; }
    .links { text-align: center; margin-top: 10px; }
    .links a { color: #007bff; text-decoration: none; margin: 0 10px; font-size: 1.1em; }
    .links a:hover { text-decoration: underline; }
    .links i { margin-right: 5px; }
  
    /* Style dla bloku Statistics */
    .stats {
      margin: 20px 0;
      background: #e9ecef;
      padding: 10px;
      border-radius: 4px;
    }
    .stats h2 {
      margin-top: 0;
    }
    .stats ul {
      list-style: none;
      padding-left: 0;
    }
    .stats li {
      margin-bottom: 5px;
    }
  
    /* Style dla bloku Recent Deploy Logs */
    .logs {
      margin-top: 20px;
      background: #fafafa;
      border-radius: 4px;
      border: 1px solid #ddd;
      padding: 10px;
    }
    .log-entry {
      border-bottom: 1px solid #ccc;
      padding: 5px 0;
    }
    .log-entry:last-child {
      border-bottom: none;
    }
    .user-info {
      text-align: center;
    }

    .log-entry {
      background: #f9f9f9;
      margin: 8px 0;
      padding: 8px 12px;
      border-left: 4px solid #007bff;
      border-radius: 4px;
    }
    .log-timestamp {
      font-weight: bold;
      margin-right: 10px;
      color: #555;
    }
    .log-details {
      display: inline;
      color: #333;
      margin: 0;
    }

    .stats-graphic {
      margin: 20px 0;
      text-align: center;
    }
    .bar-container {
      display: flex;
      height: 30px;
      background: #ddd;
      border-radius: 4px;
      overflow: hidden;
      margin: 10px auto;
      max-width: 100%;
    }
    .bar-success {
      background: #28a745;
      color: #fff;
      line-height: 30px;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
    }
    .bar-failed {
      background: #dc3545;
      color: #fff;
      line-height: 30px;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
    }


    .flash-messages {
      margin: 20px 0;
    }

    .flash-messages p {
      margin: 0 0 5px 0;
      padding: 10px;
      border-radius: 4px;
    }

    /* Dla kategorii success */
    .flash-messages p.success {
      background-color: #d4edda; /* Jasnozielone tło */
      color: #155724;           /* Zielony tekst */
      border: 1px solid #c3e6cb;
    }

    /* Dla kategorii danger */
    .flash-messages p.danger {
      background-color: #f8d7da; /* Jasnoczerwone tło */
      color: #721c24;           /* Czerwony tekst */
      border: 1px solid #f5c6cb;
    }

    /* Dla kategorii info */
    .flash-messages p.info {
      background-color: #d1ecf1; /* Jasnoniebieskie tło */
      color: #0c5460;           /* Niebieski tekst */
      border: 1px solid #bee5eb;
    }


    .links-nav ul {
      /* Usuwamy domyślne wcięcia i kuleczki */
      list-style: none;
      margin: 0;
      padding: 0;

      /* Rozmieszczenie linków w elastyczny sposób */
      display: flex;
      flex-wrap: wrap;      /* Pozwoli zawijać się wierszom przy małym ekranie */
      justify-content: center;
      gap: 10px;            /* Odstęp między przyciskami */
    }

    .links-nav li {
      margin: 0;
      padding: 0;
    }

    .links-nav li a {
      display: inline-block;
      color: #007bff;
      text-decoration: none;
      padding: 8px 12px;
      background: #f8f8f8;
      border-radius: 4px;
      border: 1px solid #ddd;
      transition: background 0.2s;
    }

    .links-nav li a:hover {
      background: #e2e6ea;
      text-decoration: none;
    }
    .deploy-container {
      margin: 20px auto;     /* odstęp u góry i dołu */
      text-align: center;    /* środek strony */
    }

    .deploy-now-btn {
      display: inline-block;
      width: 60%;            /* szeroki przycisk - możesz dostosować */
      max-width: 400px;      /* by się za bardzo nie rozciągał na dużym ekranie */
      padding: 15px;
      font-size: 1.2em;
      text-decoration: none;
      color: #fff;
      background: #007bff;
      border-radius: 6px;
      border: 1px solid #007bff;
      transition: background 0.2s;
    }

    .deploy-now-btn:hover {
      background: #0056b3;
    }

    .links-nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
    }

    .links-nav li {
      margin: 0;
      padding: 0;
    }

    .links-nav li a {
      display: inline-block;
      color: #007bff;
      text-decoration: none;
      padding: 8px 12px;
      background: #f8f8f8;
      border-radius: 4px;
      border: 1px solid #ddd;
      transition: background 0.2s;
    }

    .links-nav li a:hover {
      background: #e2e6ea;
      text-decoration: none;
    }

  </style>
  
</head>
<body>
  <div class="container">
    <h1>/etc/hosts file manager</h1>
    {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
      <div class="flash-messages">
        {% for category, message in messages %}
          <p class="{{ category }}">{{ message }}</p>
        {% endfor %}
      </div>
    {% endif %}
  {% endwith %}
  
    <div class="user-info">
      <p><h2>Welcome, <b>{{ user.username }}</b>!</h2></p>
    </div>
    <div class="deploy-container">
      <a href="{{ url_for('deploy_now') }}" class="deploy-now-btn">
        <i class="fas fa-rocket"></i> Deploy Now
      </a>
    </div>
    
    <div class="links-nav">
      <ul>
        <li><a href="{{ url_for('manage_hosts') }}"><i class="fas fa-server"></i> Manage remote servers</a></li>
        <li><a href="{{ url_for('clear_all_hosts') }}"><i class="fas fa-trash-alt"></i> Clear /etc/hosts on remote</a></li>
    <!--    <li><a href="{{ url_for('list_hosts_files') }}"><i class="fas fa-list"></i> List /etc/hosts files</a></li> -->
        <li><a href="{{ url_for('edit_local_hosts') }}"><i class="fas fa-edit"></i> Edit /etc/hosts</a></li>
        <li><a href="{{ url_for('list_regex_hosts') }}"><i class="fas fa-network-wired"></i> Manage Regex/CIDR</a></li>
        <li><a href="{{ url_for('new_regex_host') }}"><i class="fas fa-plus-circle"></i> Add new CIDR entry</a></li>
        <li><a href="{{ url_for('backups') }}"><i class="fas fa-archive"></i> Backups</a></li>
        <li><a href="{{ url_for('settings') }}"><i class="fas fa-cog"></i> Settings</a></li>
        <li><a href="{{ url_for('change_password') }}"><i class="fas fa-key"></i> Change Password</a></li>
        <li><a href="{{ url_for('logout') }}"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
      </ul>
    </div>
    
    <div class="stats">
      <h2>Statistics</h2>
      <ul>
        <li>Number of managed server: <b>{{ stats.host_count }}</b></li>
        <li>Total deployments: <b>{{ stats.total_deployments }}</b></li>
        <li>Successful deployments: <b>{{ stats.successful_deployments }}</b></li>
        <li>Failed deployments: <b>{{ stats.failed_deployments }}</b></li>
      </ul>
    </div>
    <div class="stats-graphic">
      <h2>Deployment Success Rate</h2>
      <div class="bar-container">
        <div class="bar-success" style="width: {{ (stats.successful_deployments / stats.total_deployments * 100) if stats.total_deployments else 0 }}%;">
          {{ stats.successful_deployments }} Successful
        </div>
        <div class="bar-failed" style="width: {{ (stats.failed_deployments / stats.total_deployments * 100) if stats.total_deployments else 0 }}%;">
          {{ stats.failed_deployments }} Failed
        </div>
      </div>
    </div>
    <div class="logs">
      <h2>Recent Deploy Logs</h2>
      {% if logs %}
        {% for log in logs %}
          <div class="log-entry">
            <span class="log-timestamp">{{ log.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}</span>
            <p class="log-details">{{ log.details }}</p>
          </div>
        {% endfor %}
      {% else %}
        <p>No deployment logs available yet.</p>
      {% endif %}
    </div>
  </div>
</body>
</html>