<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Regex /etc/hosts Entries</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: #f1f1f1;
            padding: 20px;
        }
        .container {
            max-width: 700px;
            margin: 0 auto;
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        h1 {
            text-align: center;
            margin-bottom: 1em;
            color: #333;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 1em;
        }
        th, td {
            text-align: left;
            border-bottom: 1px solid #ddd;
            padding: 8px;
        }
        .actions {
            white-space: nowrap;
        }
        .btn {
            display: inline-block;
            padding: 6px 12px;
            background: #007bff;
            color: #fff;
            text-decoration: none;
            margin-right: 5px;
            border-radius: 4px;
            font-size: 0.9em;
        }
        .btn:hover {
            background: #0056b3;
        }
        .btn-delete {
            background: #dc3545;
        }
        .btn-delete:hover {
            background: #b52b37;
        }
        .links { text-align: center; margin-top: 10px; }
        .links a { color: #007bff; text-decoration: none; }
       .links a:hover { text-decoration: underline; }

        .button-big {
            margin-top: 0.5em;
            padding: 10px 20px;
            background: #0c7001;
            border: none;
            color: #fff;
            cursor: pointer;
            border-radius: 3px;
            font-size: 1.1em;
            text-decoration: none;
            display: block;
            width: 65%;
        }
        .button-big:hover {
            background: #104d09;
        }


    </style>
</head>
<body>
<div class="container">
    <h1>Regex (CIDR) for /etc/hosts Entries</h1>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Domain</th>
                <th>CIDR Range</th>
                <th>Comment</th>
                <th class="actions">Actions</th>
            </tr>
        </thead>
        <tbody>
        {% for e in entries %}
            <tr>
                <td>{{ e.id }}</td>
                <td>{{ e.domain_suffix }}</td>

                <td>{{ e.cidr_range }}</td>
                <td>{{ e.comment }}</td>
                <td class="actions">
                    <a href="{{ url_for('edit_regex_host', entry_id=e.id) }}" class="btn">Edit</a>
                    <form action="{{ url_for('delete_regex_host', entry_id=e.id) }}" method="POST" style="display:inline;">
                        <button type="submit" class="btn btn-delete" onclick="return confirm('Are you sure you want to delete this entry?');">
                            Delete
                        </button>
                    </form>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    <center><a href="{{ url_for('new_regex_host') }}" class="button-big">Add New Entry</a></center>

    <div class="links">
      <a href="{{ url_for('dashboard') }}">Back to Dashboard</a>
  </div>
</div>
</body>
</html>