{% extends "base.html" %}

{% import "bootstrap/wtf.html" as wtf %}
{% import "bootstrap/fixes.html" as fixes %}
{% import "bootstrap/utils.html" as util %}

{% block title %}Explore Similar Pathways{% endblock %}


{% block styles %}
    {{ super() }}
{% endblock %}

{% block scripts %}
    {{ super() }}
    {% include "dependencies/common.html" %}

{% endblock %}

{% block content %}
    <div class="container" style="margin-top: 50px">
        {{ util.flashed_messages(dismissible=True, container=False) }}

        <div class="panel panel-default">
            <div class="panel-heading">Clustegrammer View</div>
            <div class="panel-body">
                <p>Visualize the HeatMap of each individual pathway database to identify clusters of pathways based on
                    their content similarity. This visualization is powered by <a
                            href="http://amp.pharm.mssm.edu/clustergrammer/"> Clustergrammer</a>.
                </p>
                <p>
                    <a href="{{ url_for('ui.kegg_matrix') }}" class="btn btn-primary">
                        KEGG
                    </a>
                    <a href="{{ url_for('ui.reactome_matrix') }}" class="btn btn-primary">
                        Reactome
                    </a>
                    <a href="{{ url_for('ui.wikipathways_matrix') }}" class="btn btn-primary">
                        WikiPathways
                    </a>
                </p>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">Network View</div>
            <div class="panel-body">
                <p>The network view allows you to visualize the pathway knowledge as a network.
                </p>
                <a href="{{ url_for('analysis.similarity_network') }}"
                   class="btn btn-primary">
                    Similarity network
                </a>
            </div>
        </div>
    </div>
    {% include "footer.html" %}
{% endblock %}