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

{{ block title() }}OpenRPC UI - HeroApp 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 .SpecList }}
                <option value="{{ . }}" {{ if eq . $.SelectedSpec }}selected{{ end }}>{{ . }}</option>
                {{ 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 .Methods }}
            <a href="/rpcui?spec={{ $.SelectedSpec }}&method={{ . }}&socketPath={{ $.SocketPath }}" 
               class="list-group-item list-group-item-action method-item {{ if eq . $.SelectedMethod }}active{{ end }}">
              {{ . }}
            </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 .Method.Params }}
              <tr>
                <td>{{ .Name }}</td>
                <td><code>{{ .Schema.Type }}</code></td>
                <td>
                  {{ if .Required }}
                  <span class="schema-required">Yes</span>
                  {{ else }}
                  <span class="schema-optional">No</span>
                  {{ end }}
                </td>
                <td>{{ .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 }}