<!DOCTYPE html>
<html data-theme="dark">
<head>
    <title>Infinite-Noodles</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/static/pub/bulma.min.css">
    <link rel="stylesheet" href="/static/pub/all.min.css">
     <style>
        .banner-container {
            background-image: url("/static/pub/long-banner.jpg");
            background-repeat: no-repeat;
            background-size: cover;
            position: relative;
            width: 100%; 
        }
        img.banner {
            height: 50px;
        }
        img.banner-long {
            height: 50px;
            object-fit: fill;
        }
        table {
            width: 100%;
        }
    </style> 
</head>

<body class="has-navbar-fixed-top">
    <nav class="navbar is-fixed-top" role="navigation" aria-label="main navigation">
        <div class="navbar-brand">
            <img class="banner" src="/static/pub/logo.jpg"/>
        </div>
        <div class="banner-container">
            <!-- <img class="banner-long" src="/static/pub/long-banner.jpg"/> -->
        </div>
    </nav>
    
    <div class="table-container">
        <table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Proto</th>
                    <th>Listening Port</th>
                    <th>Dest Port</th>
                    <th>Dest Host/IP</th>
                    <th>Expiration</th>
                    <th>Status</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input class="input is-link is-small" type="text" placeholder="Name"/></td>
                    <td>TCP</td>
                    <td><input class="input is-link is-small" type="text" placeholder="Listen Port"/></td>
                    <td><input class="input is-link is-small" type="text" placeholder="Destination Port"/></td>
                    <td><input class="input is-link is-small" type="text" placeholder="Destination Host"/></td>
                    <td>Expiration</td>
                    <td>
                    </td>
                    <td>
                        <button class="button">
                            <span class="icon has-text-success"><i class="fas fa-plus"></i></span>
                        </button>
                    </td>
                </tr>
                {{range .}}
                <tr>
                    <td>{{.Name}}</td>
                    <td>{{.Proto}}</td>
                    <td>{{.ListenPort}}</td>
                    <td>{{.DestPort}}</td>
                    <td>{{.DestHost}}</td>
                    <td>{{.Expiration}}</td>
                    <td>
                        {{if .IsUp}}
                        <span class="icon has-text-success"><i class="fas fa-check-square"></i></span>
                        {{ else }}
                        <span class="icon has-text-danger"><i class="fas fa-ban"></i></span>
                        {{ end }}
                    </td>
                    <td>
                        <a href="/delete?id={{.Id}}">
                            <span class="icon has-text-danger"><i class="fas fa-minus"></i></span>
                        </a>
                    </td>
                </tr>
                {{end}}
            </tbody>
        </table>
    </div>
    <footer class="footer">
        <div class="content has-text-centered">
          <p>
            <strong>Infinite-Noodles Network Proxy</strong> - &copy; 2025 Jimmy Allen
          </p>
        </div>
      </footer>
</body>

</html>