{% extends 'base.html' %}
{% load static %}
{% block title %} EXPath Tool 2.0{% endblock %}
{% block content %}
<main>
    <div class="container">
        <div class="d-flex justify-content-between align-items-start mb-3">
            <div class="title">
                <h2><strong>Expression Profile</strong></h2>
            </div>
            <button class="btn btn-sm btn-outline-secondary" id="downloadTsvBtn">
                Download table
            </button>
        </div>
        <div id="expression_chart" data-scale="{{ scale }}"></div>
        <div id="expression_z_chart"></div>
        <div id="heatmap-container"></div>
    </div>
</main>
<script src="{% static 'js/analysis/expression_result.js' %}"></script>
<style>
    .modal-custom {
        max-width: 80%;
    }
    .button-container{
        display: flex;
        justify-content: center;
        align-items: center;    
        gap: 24px;            
        margin-top: 20px; 
    }
    .custom-btn {
        display: inline-block;
        padding: 10px 24px;
        font-size: 1em;
        font-weight: normal;
        margin: 0;      
    }
</style>    
{% endblock %}