<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{{ title }} - Pynenc Monitor</title>

    <!-- Bootstrap CSS from CDN -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <style>
      body {
        background-color: #f8f9fa;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          sans-serif;
      }
      .card {
        background: #ffffff;
        border: 1px solid #dee2e6;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      }
      .card-header {
        font-size: 16px;
        font-weight: 600;
        padding: 16px;
      }
      .card-body {
        padding: 16px;
      }
      h5 {
        font-size: 16px;
        font-weight: 600;
        color: #212529;
        margin-bottom: 8px;
      }
      p {
        font-size: 14px;
        color: #6c757d;
        margin-bottom: 8px;
      }
      pre {
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        padding: 12px;
        font-size: 12px;
        margin-bottom: 16px;
      }
      .text-muted {
        color: #adb5bd !important;
      }
    </style>
  </head>
  <body>
    <div class="container mt-5">
      <div class="row justify-content-center">
        <div class="col-md-8">
          <div class="card">
            <div class="card-header bg-danger text-white">
              <h4 class="mb-0">{{ title }}</h4>
            </div>
            <div class="card-body">
              <p class="alert alert-danger">{{ message }}</p>

              <h5>Running with a specific app</h5>
              <p>Start the monitor with a valid Pynenc app instance:</p>
              <pre><code>pynenc --app your_app.py monitor</code></pre>

              <h5 class="mt-4">Using app discovery from state backends</h5>
              <p>
                You can also run the monitor without specifying an app by
                configuring a state backend through a plugin system.
              </p>

              <div class="card mb-3">
                <div class="card-header bg-light">
                  <strong>Available Backend Plugins</strong>
                </div>
                <div class="card-body">
                  <p>
                    <strong>Redis Plugin:</strong>
                    <code>pip install pynenc-redis</code>
                  </p>
                  <p>
                    <strong>MongoDB Plugin:</strong>
                    <code>pip install pynenc-mongodb</code>
                  </p>
                  <p class="mb-0">
                    <strong>Memory Backend:</strong> Built-in (development only,
                    no app discovery)
                  </p>
                </div>
              </div>

              <div class="card mb-3">
                <div class="card-header bg-light">
                  <strong>Configuration Methods</strong>
                </div>
                <div class="card-body">
                  <p>
                    <strong>Environment Variables:</strong> Set plugin-specific
                    configuration via environment
                  </p>
                  <p>
                    <strong>Configuration Files:</strong> Use
                    <code>pyproject.toml</code>, YAML, or JSON files
                  </p>
                  <p class="mb-0">
                    <strong>PynencBuilder:</strong> Programmatic configuration
                    in your application code
                  </p>
                </div>
              </div>

              <p class="text-muted mt-3">
                The monitor will attempt to discover apps registered in the
                configured state backend. Install the appropriate plugin for
                your backend and ensure the backend service is running. For
                configuration details, refer to the specific plugin
                documentation and the
                <a href="https://docs.pynenc.org" target="_blank"
                  >Pynenc documentation</a
                >.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Bootstrap JS Bundle -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>
