{% extends "base.html" %}
{% block content %}

<main class="main-wrap">
  <section class="card">

    <!-- Tabs -->
    <div class="tabs">
      <button id="tab-seq" class="tab active">Single Sequence</button>
      <button id="tab-fasta" class="tab">Multiple Sequences</button>
    </div>

    <!--  SINGLE SEQUENCE  -->
    <div id="panel-seq" class="panel">
      <label class="label">Protein Sequence</label>
      <textarea id="sequenceInput" placeholder="Paste protein sequence"></textarea>

      <div class="row">
        <button id="predictBtn" class="btn">Predict Localization</button>
        <div id="loadingSeq" class="loading hidden">Running prediction…</div>
      </div>

      <div id="seqResultCard" class="result-card hidden">
        <div id="seqResultHeader" class="result-header"></div>
        <div id="seqConfidenceWarning" class="warning-text"></div>

        <div class="charts-row">
          <div class="chart-card">
            <h4 class="chart-title">Confidence Bar Chart</h4>
            <canvas id="barChart"></canvas>
          </div>
          <div class="chart-card">
            <h4 class="chart-title">Radar Plot</h4>
            <canvas id="radarChart"></canvas>
          </div>
        </div>

        <div class="prob-box">
          <h4>Class Probabilities</h4>
          <div id="seqProbList" class="prob-list"></div>
        </div>
      </div>
    </div>

    <!--  FASTA  -->
    <div id="panel-fasta" class="panel hidden">
      <label class="label">Upload FASTA file</label>
      <input id="fastaFile" type="file" accept=".fa,.fasta" />

      <div class="row">
        <button id="predictFastaBtn" class="btn">Predict from FASTA</button>
        <div id="loadingFasta" class="loading hidden">Running batch prediction…</div>
      </div>

      <div id="fastaResultsWrapper" class="fasta-wrapper hidden">
        <h3>FASTA Predictions</h3>
        <p class="small-text">Click a row to view class probabilities.</p>

        <div class="table-container">
          <table class="results-table">
            <thead>
              <tr>
                <th>#</th>
                <th>Sequence ID</th>
                <th>Length</th>
                <th>Predicted Location</th>
                <th>Max Confidence</th>
              </tr>
            </thead>
            <tbody id="fastaTableBody"></tbody>
          </table>
        </div>

        <!-- DOWNLOAD BUTTON -->
        <button
          id="downloadCsvBtn"
          type="button"
          class="btn"
          style="margin-top: 1rem;"
        >
          Download CSV
        </button>
      </div>
    </div>

  </section>
</main>

<!--  FASTA DETAIL MODAL  -->

<div id="fastaModal" class="modal hidden">
  <div class="modal-backdrop" id="fastaModalBackdrop"></div>
  <div class="modal-content">
    <button id="fastaModalClose" class="modal-close">&times;</button>
    <h3 id="fastaModalTitle">Sequence details</h3>
    <p id="fastaModalMeta" class="modal-meta"></p>

    <div class="prob-box">
      <h4>Class Probabilities</h4>
      <div id="fastaProbList" class="prob-list"></div>
    </div>
  </div>
</div>

<!--  BIG BAR CHART MODAL  -->

<div id="bigBarModal" class="chart-modal hidden">
  <div class="chart-modal-content">
    <span class="close-big-chart" onclick="closeBigBar()">&times;</span>
    <canvas id="bigBarChart" width="700" height="700"></canvas>
  </div>
</div>

<!--  BIG RADAR CHART MODAL  -->
<div id="bigRadarModal" class="chart-modal hidden">
  <div class="chart-modal-content">
    <span class="close-big-chart" onclick="closeBigRadar()">&times;</span>
    <canvas id="bigRadarChart" width="700" height="700"></canvas>
  </div>
</div>

{% endblock %}