{% extends "base.html" %}
{% block title %}Home{% endblock %}

{% block content %}
<section class="hero">
    <h1>Visualize multigene-family localization across chromosomes</h1>
    <p>Upload gene coordinates and a genome (or chromosome lengths). GFViewer
       draws every family in its own colour along round-capped ideograms, computes
       localization statistics, and lets you refine the figure in the browser
       before exporting to PDF, SVG, PNG or JPG.</p>
</section>

<form id="gfv-form" class="card" action="{{ url_for('api.create_job') }}" method="post"
      enctype="multipart/form-data">
    <div class="grid">
        <fieldset class="span-2">
            <legend>Input files</legend>
            <label>Annotation file(s) <span class="req">*</span>
                <input type="file" name="data" multiple required
                       accept=".xlsx,.xls,.csv,.tsv,.txt,.bed,.gff,.gff3,.gtf,.gz">
                <small>Table (.xlsx/.csv/.tsv), <b>BED</b>, <b>GFF3</b> or <b>GTF</b>.
                       Select several files to treat each file name as a family.</small>
            </label>
            <label>Genome / chromosome lengths <span class="req">*</span>
                <input type="file" name="genome" required
                       accept=".fasta,.fa,.fna,.fai,.txt,.tsv,.csv,.sizes,.genome">
                <small>FASTA, .fai, chrom.sizes, or <code>chrom,length</code> per line.</small>
            </label>
            <label>Colour map <small>(optional)</small>
                <input type="file" name="colors" accept=".txt,.tsv,.csv">
            </label>
            <label>Gene&nbsp;&rarr;&nbsp;family mapping <small>(optional, single BED/GFF)</small>
                <input type="file" name="mapping" accept=".txt,.tsv,.csv">
            </label>
            <label>Style file <small>(optional .yaml/.json)</small>
                <input type="file" name="style" accept=".yaml,.yml,.json">
            </label>
        </fieldset>

        <div class="form-col">
            <fieldset>
                <legend>Layout</legend>
                <label>Orientation
                    <select name="orientation">
                        <option value="horizontal" selected>horizontal</option>
                        <option value="vertical">vertical</option>
                    </select>
                </label>
                <label>Telomere length (bp)
                    <span class="info-tip" tabindex="0" data-tip="Genes within this many base pairs of a chromosome end count as sub-telomeric in the telomere-proximity statistics.">i</span>
                    <input type="number" name="telomere_length" value="10000" min="0">
                </label>
                <label>Chromosomes side by side <small>(blank = auto)</small>
                    <span class="info-tip" tabindex="0" data-tip="How many chromosomes to place in each row before wrapping to a new row. Leave blank to let GFViewer choose automatically.">i</span>
                    <input type="number" name="columns" placeholder="auto" min="0">
                </label>
                <label>Thickness slot / row height (cm)
                    <span class="info-tip" tabindex="0" data-tip="Vertical space reserved for each chromosome row, including the gene ticks drawn above and below it.">i</span>
                    <input type="number" name="row_height_cm" value="3.0" step="0.2" min="1.2">
                </label>
                <label>Length budget (cm, vertical)
                    <span class="info-tip" tabindex="0" data-tip="Total vertical length available for chromosomes when Orientation is set to vertical.">i</span>
                    <input type="number" name="length_cm" value="16" step="1" min="4">
                </label>
                <label>Margin around the drawing (cm)
                    <span class="info-tip" tabindex="0" data-tip="The blank border kept around the drawing after trimming surrounding whitespace.">i</span>
                    <input type="number" name="page_margin_cm" value="0.3" step="0.1" min="0">
                </label>
                <label class="check"><input type="checkbox" name="fit_to_content" value="1" checked> Trim surrounding whitespace</label>
                <label class="check"><input type="checkbox" name="show_centromeres" value="1"> Draw centromeres</label>
                <label class="check"><input type="checkbox" name="no_split_strand" value="1"> Do not split strands
                    <span class="info-tip" tabindex="0" data-tip="By default, + strand genes are drawn above the chromosome axis and - strand genes below it. Check this to draw every gene on the same side regardless of strand.">i</span></label>
                <label class="check"><input type="checkbox" name="show_unplaced" value="1"> Also draw unplaced contigs
                    <span class="info-tip" tabindex="0" data-tip="Genes on sequences that aren't in your chromosome/genome list (e.g. small unplaced scaffolds) are drawn as extra, unlabeled mini-chromosomes instead of being left out.">i</span></label>
                <label>Genes on sequences missing from the genome file
                    <span class="info-tip" tabindex="0" data-tip="What to do with genes whose chromosome/scaffold name isn't found in the genome file: stop with an error, draw them as unplaced contigs, or silently drop them.">i</span>
                    <select name="on_unknown_chrom">
                        <option value="error" selected>reject (error)</option>
                        <option value="unplaced">keep as unplaced contigs</option>
                        <option value="drop">drop them</option>
                    </select>
                </label>
            </fieldset>

            <fieldset>
                <legend>Legend</legend>
                <label>Location
                    <select name="legend_location">
                        <option value="lower center" selected>lower center</option>
                        <option value="upper center">upper center</option>
                        <option value="outside right">outside right</option>
                        <option value="outside bottom">outside bottom</option>
                        <option value="center left">center left</option>
                        <option value="center right">center right</option>
                    </select>
                </label>
                <label>Columns <small>(0 = auto)</small>
                    <span class="info-tip" tabindex="0" data-tip="How many columns to arrange the family swatches into. 0 lets GFViewer choose a sensible number automatically.">i</span>
                    <input type="number" name="legend_columns" value="0" min="0">
                </label>
                <label class="check"><input type="checkbox" name="no_legend" value="1"> Hide legend</label>
            </fieldset>
        </div>

        <div class="form-col">
            <fieldset class="compact">
                <legend>Marks &amp; labels</legend>
                <label>Gene mark style
                    <span class="info-tip" tabindex="0" data-tip="How each gene is drawn on the chromosome: a short line, a lollipop (line with a dot at the tip), a triangle, a box, or an arrow.">i</span>
                    <select name="tick_style">
                        <option value="line">line</option>
                        <option value="lollipop" selected>lollipop</option>
                        <option value="triangle">triangle</option>
                        <option value="box">box</option>
                        <option value="arrow">arrow</option>
                    </select>
                </label>
                <label>Gene labels
                    <span class="info-tip" tabindex="0" data-tip="Text to print next to the genes: none (ticks only), family (one label per contiguous cluster of the same family), or gene id (every gene's own identifier).">i</span>
                    <select name="label_mode">
                        <option value="none" selected>none</option>
                        <option value="family">family (one per cluster)</option>
                        <option value="gene_id">gene id</option>
                    </select>
                </label>
                <label>Figure title
                    <input type="text" name="title" placeholder="optional">
                </label>
                <label class="check"><input type="checkbox" name="show_titles" value="1" checked>
                    Bake titles into the image files</label>
                <small>Applies to the chromosome figure title and the built-in
                    headings on the analytics charts. Uncheck for clean images to
                    caption yourself.</small>
            </fieldset>

            <fieldset>
                <legend>Many families</legend>
                <label class="check"><input type="checkbox" name="collapse_rare" value="1" id="gfv-home-collapse-rare">
                    Collapse rare families into &ldquo;Other&rdquo; above the 40-family cap
                    <span class="info-tip" tabindex="0" data-tip="GFViewer supports up to 40 distinct families. Check this to fold the least common families beyond that cap into a single 'Other' category instead of rejecting the input.">i</span></label>
                <label id="gfv-home-collapse-top-row" hidden>Keep top N families <small>(blank = default 39)</small>
                    <span class="info-tip" tabindex="0" data-tip="How many of the most frequent families to keep as their own colour; the rest are folded into 'Other'. Leave blank to keep as many as fit under the 40-family cap.">i</span>
                    <input type="number" name="collapse_keep_top" min="1" max="39" placeholder="39">
                </label>
                <label>GFF/GTF family attribute <small>(optional)</small>
                    <span class="info-tip" tabindex="0" data-tip="Which GFF3/GTF attribute holds the gene family name (e.g. gene_family, Note, gene_biotype). Only used for GFF3/GTF input without a separate mapping file.">i</span>
                    <input type="text" name="family_attr" placeholder="e.g. gene_family">
                </label>
            </fieldset>

            <fieldset>
                <legend>Analytics &amp; export</legend>
                <label class="check"><input type="checkbox" name="with_analytics" value="1" checked>
                    Compute localization statistics</label>
                <label class="check"><input type="checkbox" name="colocalization" value="1">
                    Pairwise co-localization test (slower)
                    <span class="info-tip" tabindex="0" data-tip="Tests whether pairs of families sit closer together on the same chromosome than expected by chance. This is O(families squared) and can be slow with many families.">i</span></label>
                <div class="fmt">
                    <span>Also export:</span>
                    <label class="check"><input type="checkbox" name="formats" value="png" checked> PNG</label>
                    <label class="check"><input type="checkbox" name="formats" value="jpg"> JPG</label>
                    <label class="check"><input type="checkbox" name="formats" value="eps"> EPS</label>
                    <small>PDF &amp; SVG are always produced.</small>
                </div>
            </fieldset>
        </div>
    </div>

    <div class="actions">
        <span id="gfv-form-msg" class="msg" role="status"></span>
        <button type="submit" class="btn primary">Generate figure</button>
    </div>
</form>

<section class="card examples">
    <h2>Example datasets</h2>
    <p class="muted">Run one straight through the pipeline, or download the raw
       input files to try on your own machine. All of these ship with GFViewer.</p>
    <div class="dataset-table-wrap">
    <table class="dataset-table">
        <thead>
            <tr><th>Dataset</th><th>Organism</th><th class="num">Families</th>
                <th>Format</th><th>Actions</th></tr>
        </thead>
        <tbody>
        {% for d in datasets %}
            <tr{% if not d.available %} class="unavailable"{% endif %}>
                <td>{{ d.title.split('—')[-1].strip() if '—' in d.title else d.title }}</td>
                <td>{{ d.organism }}</td>
                <td class="num">{{ d.families }}</td>
                <td>{{ d.format }}</td>
                <td>
                    <div class="dataset-actions">
                    {% if d.available %}
                    <a class="btn small primary" href="{{ url_for('main.dataset_run', key=d.key) }}">Run</a>
                    <a class="btn small" href="{{ url_for('main.dataset_download', key=d.key) }}">Download</a>
                    {% else %}
                    <span class="muted">not installed</span>
                    {% endif %}
                    </div>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    </div>
    <p class="muted">
        <a class="btn" href="{{ url_for('main.datasets_download_all') }}">Download every dataset (ZIP)</a>
    </p>
</section>

<section class="card install-cta">
    <h2>Prefer the command line?</h2>
    <p class="muted">GFViewer is a pip-installable tool. Everything this portal
       does &mdash; rendering, styling, the full analytics suite &mdash; is also
       available as the <code>gfviewer</code> command for scripting and batch
       runs.</p>
    <pre class="cta-code"><code>python -m pip install gfviewer
gfviewer -d genes.csv -g genome.fasta -o out/ --analytics -cen</code></pre>
    <div class="dl-links">
        <a class="btn primary" href="{{ url_for('main.install') }}">Installation guide</a>
        <a class="btn" href="{{ links.pypi }}" target="_blank" rel="noopener">PyPI</a>
        <a class="btn" href="{{ links.github }}" target="_blank" rel="noopener">Source (GitHub)</a>
        <a class="btn" href="{{ links.releases }}" target="_blank" rel="noopener">Release downloads</a>
        <a class="btn" href="{{ url_for('main.install_guide_md') }}">Guide (Markdown)</a>
    </div>
</section>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/submit.js') }}"></script>
<script>
(function () {
  var cb = document.getElementById("gfv-home-collapse-rare");
  var row = document.getElementById("gfv-home-collapse-top-row");
  if (!cb || !row) return;
  function sync() { row.hidden = !cb.checked; }
  cb.addEventListener("change", sync);
  sync();
})();
</script>
{% endblock %}