{{extends "../layouts/base"}}

{{block title()}}
OpenRPC UI
{{end}}

{{block css()}}
<link rel="stylesheet" href="/static/css/rpcui.css">
{{end}}

{{block body()}}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
  <h1 class="h2">OpenRPC UI</h1>
</div>

<div class="row mb-4">
  <div class="col-md-12">
    <div class="card">
      <div class="card-header">
        <h5>Select OpenRPC Specification</h5>
      </div>
      <div class="card-body">
        <form id="specForm" action="/rpcui" method="get" class="row g-3">
          <div class="col-md-4">
            <label for="spec" class="form-label">Specification</label>
            <select class="form-select" id="spec" name="spec" onchange="this.form.submit()">
              <option value="">Select a specification</option>
              {{ if SpecList }}
                {{ range spec := SpecList }}
                <option value="{{ spec }}" >
                {{ end }}
              {{ else }}
                <option value="" disabled>No specifications available</option>
              {{ end }}
            </select>
          </div>
          <div class="col-md-4">
            <label for="socketPath" class="form-label">Socket Path</label>
            <input type="text" class="form-control" id="socketPath" name="socketPath" value="{{ SocketPath }}" placeholder="e.g., /tmp/rpc.sock">
          </div>
          <div class="col-md-4 d-flex align-items-end">
            <button type="submit" class="btn btn-primary">Apply</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-12">
    <div class="alert alert-info">
      <p>This is the OpenRPC UI page. It allows you to interact with OpenRPC specifications.</p>
      <p>Currently available specs: {{ if SpecList }}{{ len(SpecList) }}{{ else }}0{{ end }}</p>
    </div>
  </div>
</div>

{{ if SelectedSpec }}
<div class="row">
  <!-- Method Tree -->
  <div class="col-md-3">
    <div class="card">
      <div class="card-header"><h5>Methods</h5></div>
      <div class="card-body p-0">
        <div class="method-tree list-group list-group-flush">
          {{ if Methods }}
            {{ range m := Methods }}
            <a href="/rpcui?spec={{ SelectedSpec }}&method={{ m }}&socketPath={{ SocketPath }}"
               class="list-group-item list-group-item-action method-item {{ if eq(m, SelectedMethod) }}active{{ end }}">
              {{ m }}
            </a>
            {{ end }}
          {{ else }}
            <div class="list-group-item">No methods available</div>
          {{ end }}
        </div>
      </div>
    </div>
  </div>

  <!-- Method Details -->
  <div class="col-md-9">
    {{ if Method }}
    <div class="card mb-4">
      <div class="card-header">
        <h5>{{ Method.Name }}</h5>
        {{ if Method.Description }}<p class="text-muted mb-0">{{ Method.Description }}</p>{{ end }}
      </div>
      <div class="card-body">
        <!-- Parameters -->
        <h6>Parameters</h6>
        <table class="table table-sm schema-table">
          <thead><tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr></thead>
          <tbody>
            {{ if Method.Params }}
              {{ range p := Method.Params }}
              <tr>
                <td>{{ p.Name }}</td>
                <td><code>{{ p.Schema.Type }}</code></td>
                <td>{{ if p.Required }}<span class="schema-required">Yes</span>{{ else }}<span class="schema-optional">No</span>{{ end }}</td>
                <td>{{ p.Description }}</td>
              </tr>
              {{ end }}
            {{ else }}
              <tr><td colspan="4">No parameters</td></tr>
            {{ end }}
          </tbody>
        </table>

        <!-- Result -->
        <h6 class="mt-4">Result</h6>
        <table class="table table-sm schema-table">
          <thead><tr><th>Name</th><th>Type</th><th>Description</th></tr></thead>
          <tbody>
            <tr>
              <td>{{ Method.Result.Name }}</td>
              <td><code>{{ Method.Result.Schema.Type }}</code></td>
              <td>{{ Method.Result.Description }}</td>
            </tr>
          </tbody>
        </table>

        <!-- Try It -->
        <h6 class="mt-4">Try It</h6>
        <form id="rpcForm" class="mb-3">
          <input type="hidden" name="selectedMethod" value="{{ SelectedMethod }}">
          <div class="mb-3">
            <label for="paramsEditor" class="form-label">Parameters:</label>
            <textarea class="form-control code-editor" id="paramsEditor" rows="10">{{ ExampleParams }}</textarea>
          </div>
          <button type="submit" class="btn btn-primary">Execute</button>
        </form>

        <div id="resultContainer" class="result-container d-none">
          <h6>Result:</h6>
          <pre id="resultOutput" class="bg-light p-2 rounded"></pre>
        </div>
        <div id="errorContainer" class="result-container d-none">
          <h6>Error:</h6>
          <pre id="errorOutput" class="bg-light p-2 rounded text-danger"></pre>
        </div>
      </div>
    </div>
    {{ else if SelectedMethod }}
      <div class="alert alert-warning">Method not found: {{ SelectedMethod }}</div>
    {{ else }}
      <div class="alert alert-info">Select a method from the list to view details.</div>
    {{ end }}
  </div>
</div>
{{ end }}
{{end}}

{{block scripts()}}
<script src="/static/js/rpcui.js"></script>
{{end}}