{% extends 'base.html' %} {% load static %} {% block content %}
<link rel="stylesheet" href="{% static '/css/label.css' %}">

<div class="label-main">
    <div class="label-search">
        <div class="search">
            <h1>Search Genes</h1>
            <div class="searchbar">
                <form  action="." method="POST">
                    {% csrf_token %}
                    <div class="form-group">
                        {{ form.query }}
                    </div>
                    <button type="submit" class="btn btn-primary">Search</button>
                </form>
            </div>
        </div>

        <div class="label-result">
            <div class="label-title">
                <h1> Cell Type </h1>
                <img src="data:image/png;base64,{{ umap_fig_data }}" alt="leiden">
            </div>
            <div class="label-title">
                <h1> Gene Expression </h1>
                <img src="data:image/png;base64,{{ umap_search_data }}" alt="expression">
            </div>
        </div>

    </div>

    <div class="label-input">
        
        <div class="label-card">
            <h1> Cluster 1</h1>
            <p> marker gene table </p>
        </div>

        <div class="label-card">
            <h1> Cluster 2</h1>
            <p> marker gene table </p>
        </div>

        <div class="label-card">
            <h1> Cluster 3</h1>
            <p> marker gene table </p>
        </div>

        <div class="label-card">
            <h1> Cluster 4</h1>
            <p> marker gene table </p>
        </div>

        <div class="label-card">
            <h1> Cluster 1</h1>
            <p> marker gene table </p>
        </div>

        <div class="label-card">
            <h1> Cluster 2</h1>
            <p> marker gene table </p>
        </div>

        <div class="label-card">
            <h1> Cluster 3</h1>
            <p> marker gene table </p>
        </div>

        <div class="label-card">
            <h1> Cluster 4</h1>
            <p> marker gene table </p>
        </div>

    </div>

</div>
<script src="{% static '/js/personal.js' %}" async defer></script>
{% endblock %}