{# Landing page: filterable/sortable list of systems (see static/javascript/home.js for the client-side search/sort). #}
{% extends "base.html" %}

{% block title %}PhysikMDB - Home{% endblock %}

{% block meta_description %}
<meta name="description" content="A free database of computed molecular orbitals, photoemission orbital tomography maps, and optical excitation spectra (Casida/TD-DFT) for organic and organometallic molecules.">
{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='styles/home.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='styles/help.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='styles/tour.css') }}">
{% endblock %}

{% block javascript %}
<script src="{{ url_for('static', filename='javascript/home.js') }}" type="module"></script>
{% endblock %}

{% block header %}
<header class="header">
    <h1 data-tour="title">Molecular Orbital Database</h1>
    <nav>
        <a href="{{ url_for('static', filename='misc/main.pdf') }}" data-tour="theory"
            title="The derivation behind these pages: photoemission orbital tomography for an LCAO-GTO basis set (PDF)">Theory</a>
        <a href="https://pypi.org/project/physikmdb/" data-tour="python"
            title="physikmdb on PyPI: the same C kernels this site runs, plus a client for its database. pip install physikmdb">Python</a>

        <a href="/license">License</a>
        <a href="/imprint">Imprint</a>
        <a href="/privacy">Privacy</a>
        <a href="https://homepage.uni-graz.at/de/peter.puschnig/">Contact</a>
        <a href="{{ calculation_request_mailto() }}"
            title="Ask us to run a calculation that isn't in the database yet">Request</a>
        {# The two ways into the help system. Both are always visible: nothing
        is remembered between visits, so these buttons are the only entry
        points there are. The tour is only offered when its example
        calculation actually resolves (src/app.py TOUR_CALCULATION_ID). #}
        {% set tour_id = tour_calculation_id() %}
        {% if tour_id %}
        <button type="button" id="tour-start" class="tour-start" data-calculation-id="{{ tour_id }}"
            title="A guided walk through the database, one example calculation and its excitons">Tutorial</button>
        {% endif %}
        <button type="button" id="help-toggle" class="help-toggle" aria-pressed="false"
            title="Show a help badge on everything that needs explaining">?</button>
    </nav>
</header>
{% endblock %}

{% block content %}
{% set is_systems = systems is defined %}
<section class="search-controls">
    <div class="search-bar">
        <div class="search-field">
            {# Carried through a filter submit by home.js, so a query survives
            the reload the filter dropdowns trigger #}
            <input id="search" type="search" placeholder="Search, e.g. Mn* xc=b3lyp ie&gt;3 ~ea&lt;=0"
                value="{{ request.args.get('search', '') }}"
                title="Filters the table as you type. Hover for the search syntax.">
            <div class="search-help" role="tooltip">
                <p>Space/<code>&amp;</code>=AND, <code>|</code>=OR, leading <code>~</code>=NOT, <code>"x"</code>=exact.
                </p>
                <ul>
                    <li><code>Mn*</code> wildcard &middot; <code>xc=b3lyp</code> field &middot; <code>ie&gt;3</code>
                        compare (<code>= != &gt; &gt;= &lt; &lt;=</code>)</li>
                    <li><code>C=6</code> element count, any symbol: <code>Fe&gt;0</code></li>
                </ul>
                <p>Fields: id, formula, mass, name, fullname, xc, basis, charge, spin, gap, ip/ie, ea, code,
                    version, author, date, energy, pointgroup.</p>
            </div>
            <button type="button" class="help-badge"
                data-help="Filters the table as you type; nothing is sent to the server. Beyond the syntax shown on hover, any element symbol works as a field of its own: C=6 finds molecules with exactly six carbons, Fe>0 everything containing iron.">?</button>
        </div>
        <span class="badge-anchor">
            <button type="button" id="export-csv" class="control-surface"
                title="Downloads the rows currently visible, in the sort order shown, as physikmdb-systems.csv.
Columns are the table's own; energies in eV.">Export CSV</button>
            <button type="button" class="help-badge"
                data-help="Writes out what the table currently holds, so a search and a sort both carry into the file. It is the listing that is exported, not the orbitals or the momentum maps behind it.">?</button>
        </span>
    </div>

    <form action="/" method="GET" class="filter-form">
        <a href="/">Reset Filters</a>
        <span class="badge-anchor">
            {% if is_systems %}
            <button type="submit" id="show-calculations" class="control-surface"
                title="Show all available calculations" value="true" name="listCalculations">Show Calculations</button>
            {% else %}
            <button type="submit" id="show-systems" class="control-surface"
                title="Show all available systems">Show Systems</button>
            {% endif %}
            <button type="button" class="help-badge"
                data-help="Two ways to read the same database. Systems shows one row per molecule, picking whichever calculation ranks best for it: neutral singlet first, then preferred functionals and basis sets. Calculations shows every calculation on its own, so one molecule can appear many times.">?</button>
        </span>

        <div class="filter-fields" data-tour="filters">
            <span class="badge-anchor">
                <select name="xc_functional"
                    class="{{ 'active' if filters.xc_functional and filters.xc_functional != 'any' }}">
                    <option value="any" {{ 'selected' if not filters.xc_functional or filters.xc_functional=='any' }}>Any
                        XC-Functional</option>
                    {% for value in filter_options.xc_functional %}
                    <option value="{{ value }}" {{ 'selected' if filters.xc_functional==value }}>{{ value }}</option>
                    {% endfor %}
                </select>
                <button type="button" class="help-badge"
                    data-help="Five dropdowns narrowing the table by exchange-correlation functional, basis set, charge, spin multiplicity and the code that ran the calculation. They combine, and each one is a plain URL parameter, so any filtered view can be bookmarked.">?</button>
            </span>

            <select name="basis_set" class="{{ 'active' if filters.basis_set and filters.basis_set != 'any' }}">
                <option value="any" {{ 'selected' if not filters.basis_set or filters.basis_set=='any' }}>Any Basis Set
                </option>
                {% for value in filter_options.basis_set %}
                <option value="{{ value }}" {{ 'selected' if filters.basis_set==value }}>{{ value }}</option>
                {% endfor %}
            </select>

            <select name="charge" class="{{ 'active' if filters.charge and filters.charge != 'any' else '' }}">
                <option value="any" {{ 'selected' if filters.charge is none or filters.charge=='any' }}>Any Charge
                </option>
                {% for value in filter_options.charge %}
                <option value="{{ value }}" {{ 'selected' if filters.charge==(value|string) }}>{{ value }}</option>
                {% endfor %}
            </select>

            <select name="spin" class="{{ 'active' if filters.spin and filters.spin != 'any' else '' }}">
                <option value="any" {{ 'selected' if filters.spin is none or filters.spin=='any' }}>Any Spin
                </option>
                {% for value in filter_options.spin %}
                <option value="{{ value }}" {{ 'selected' if filters.spin==(value|string) }}>{{ value }}</option>
                {% endfor %}
            </select>

            <select name="code" class="{{ 'active' if filters.code and filters.code != 'any' else '' }}">
                <option value="any" {{ 'selected' if filters.code is none or filters.code=='any' }}>Any Code
                </option>
                {% for value in filter_options.code %}
                <option value="{{ value }}" {{ 'selected' if filters.code==value }}>{{ value }}</option>
                {% endfor %}
            </select>

            <label class="filter-checkbox {{ 'active' if filters.calculation_type == 'casida' }}"
                title="Only calculations with excited states, linked to their exciton page instead of the orbital list">
                <input type="checkbox" name="calculation_type" value="casida"
                    {{ 'checked' if filters.calculation_type == 'casida' }}>
                Casida only
                <button type="button" class="help-badge"
                    data-help="A Casida calculation solves the linear-response TD-DFT equations for the excited states on top of the ground state. Ticking this keeps only those, and points every row at its exciton page instead of its orbital list.">?</button>
            </label>
        </div>
    </form>
</section>

{# home.css hides #systems-section until home.js marks the page ready, so a
large table's column widths settle before the reader sees them. Without JS
that never happens, so show it unconditionally here instead. #}
<noscript><style>#systems-section { visibility: visible; }</style></noscript>

<section id="systems-section" data-tour="table">
    {# Every column is rendered for every row; the picker (home.js) only toggles
    `hidden`, so a hidden column stays searchable, sortable and in the DOM.
    `data-column` is the column key - the same word as the cells' class. #}
    <table class="clickable-table" id="systems">
        <thead>
            {# One header row for both views: they differ only in what a row stands
            for, so the scope clause is set once instead of duplicating every column. #}
            {% set scope = 'the best available calculation for this molecule' if is_systems else 'this calculation' %}
            {% set casida_title = 'Some calculation of this molecule has linear-response TD-DFT (Casida) excited states.' if is_systems
                else 'Has linear-response TD-DFT (Casida) excited states. Hover the tick for how many.' %}
            {% set casida_help = 'A tick means excited states have been computed for this molecule - not necessarily by the calculation the row opens, which is whichever one ranks best. Casida only lists those calculations themselves, each linking to its exciton page.' if is_systems
                else 'A tick means this calculation also solved for excited states, so it has an exciton page. Click the row to open the calculation, then switch to Excitons in the header.' %}
            <tr class="header">
                <th class="id" data-column="id" aria-sort="none">{{ 'System' if is_systems else 'Calculation' }}
                    <button type="button" class="help-badge"
                        data-help="One row per {{ 'molecule' if is_systems else 'calculation' }}; clicking anywhere in it opens the calculation behind it. Right-click any heading to choose which columns the table shows - molecular mass, point group, code version, author, date, total energy and a Casida tick are all there. Headings can also be dragged to reorder the columns. Neither choice survives a page reload.">?</button>
                </th>
                <th class="formula" data-column="formula" aria-sort="none">Formula</th>
                <th class="molecular_mass" data-column="molecular_mass" aria-sort="none" hidden
                    title="Molecular mass, summed from the formula with the standard atomic weights [u].">Mass (u)</th>
                <th class="point_group" data-column="point_group" aria-sort="none" hidden
                    title="Point group of the molecular geometry, in Schoenflies notation.">Point Group
                    <button type="button" class="help-badge"
                        data-help="The symmetry group of the geometry the calculation was run on. Its irreducible representations are the symmetry labels the entry page puts on each orbital.">?</button>
                </th>
                <th class="fullname" data-column="fullname" aria-sort="none">Full Name</th>
                <th class="shortname" data-column="shortname" aria-sort="none">Short Name</th>
                <th class="charge" data-column="charge" aria-sort="none" title="Total charge of {{ scope }} [e].">Charge
                    <button type="button" class="help-badge"
                        data-help="The total charge the molecule was calculated at. Charging it shifts every orbital energy, so the IP and EA of an ion do not sit on the same scale as the neutral molecule's.">?</button>
                </th>
                <th class="spin" data-column="spin" aria-sort="none" title="Spin multiplicity 2S+1 of {{ scope }}. 1 = singlet, 3 = triplet.">Spin
                    <button type="button" class="help-badge"
                        data-help="The spin multiplicity 2S+1. Anything above 1 is an open-shell calculation carrying two independent sets of orbitals, α and β, which the entry page lets you switch between.">?</button>
                </th>
                <th class="xc_functional" data-column="xc_functional" aria-sort="none" title="Exchange-correlation functional of {{ scope }}.">XC
                    <button type="button" class="help-badge"
                        data-help="The approximate exchange-correlation functional the DFT calculation used. It sets the orbital energies and everything derived from them, so two rows computed with different functionals are not directly comparable.">?</button>
                </th>
                <th class="basis_set" data-column="basis_set" aria-sort="none" title="Gaussian basis set of {{ scope }}.">Basis
                    <button type="button" class="help-badge"
                        data-help="The set of contracted Gaussians the orbitals are expanded in. Every momentum map here is computed analytically from that expansion, so the basis sets how far an orbital's diffuse tail is described.">?</button>
                </th>
                <th class="code" data-column="code" aria-sort="none" title="Quantum-chemistry code that ran {{ scope }}.">Code
                    <button type="button" class="help-badge"
                        data-help="The program the calculation was run with. Codes differ in conventions rather than in physics, and the parsers reconcile those on the way in, so a row's code says where the numbers came from and not how to read them.">?</button>
                </th>
                <th class="code_version" data-column="code_version" aria-sort="none" hidden
                    title="Version the code reported for {{ scope }}.">Version</th>
                <th class="author" data-column="author" aria-sort="none" hidden
                    title="Who ran {{ scope }}.">Author</th>
                <th class="date" data-column="date" aria-sort="none" hidden
                    title="When {{ scope }} was run (UTC).">Date</th>
                <th class="total_energy" data-column="total_energy" aria-sort="none" hidden
                    title="Total energy of {{ scope }} [eV].">Total E (eV)
                    <button type="button" class="help-badge"
                        data-help="The total energy of the converged ground state. Its absolute value carries no meaning on its own: only differences between calculations sharing a code, functional and basis set can be compared.">?</button>
                </th>
                <th class="gap" data-column="gap" aria-sort="none" title="ε_LUMO − ε_HOMO of {{ scope }} [eV].">Gap (eV)
                    <button type="button" class="help-badge"
                        data-help="The HOMO-LUMO gap, ε_LUMO − ε_HOMO. It is a difference of Kohn-Sham eigenvalues and not an optical gap: where a Casida calculation exists, its lowest excitation energy is generally lower.">?</button>
                </th>
                <th class="ip" data-column="ip" aria-sort="none"
                    title="ε_HOMO of {{ scope }}, referred to the vacuum level [eV].
Negative for a bound orbital; the Koopmans ionisation potential is −ε_HOMO.">
                    IP (eV)
                    <button type="button" class="help-badge"
                        data-help="The energy of the highest occupied orbital, referred to the vacuum level. The column shows that orbital energy itself, so it is negative for a bound state and the Koopmans ionisation potential is its negative.">?</button>
                </th>
                <th class="ea" data-column="ea" aria-sort="none"
                    title="ε_LUMO of {{ scope }}, referred to the vacuum level [eV].
The Koopmans electron affinity is −ε_LUMO.">
                    EA (eV)
                    <button type="button" class="help-badge"
                        data-help="The energy of the lowest unoccupied orbital, referred to the vacuum level. As with IP, the column shows the orbital energy itself, so the Koopmans electron affinity is its negative.">?</button>
                </th>
                <th class="casida" data-column="casida" aria-sort="none" hidden title="{{ casida_title }}">Casida
                    <button type="button" class="help-badge" data-help="{{ casida_help }}">?</button>
                </th>
            </tr>
        </thead>
        <tbody>
            {# One loop for both views: a systems row carries the id of the
            calculation it was ranked from, a calculations row is that
            calculation. #}
            {% for row in (systems if is_systems else calculations) %}
            {% set calculation_id = row.calculation_id if is_systems else row.id %}
            {% set row_url = '/' ~ calculation_id ~ ('/exciton' if filters.calculation_type == 'casida' else '') %}
            <tr class="{{ 'even' if loop.index is even else 'odd' }}"
                {% if is_systems %}title="Calculation #{{ calculation_id }}, XC: {{ row.xc_functional }}, Basis: {{ row.basis_set }}"{% endif %}>
                <td class="id"><a href="{{ row_url }}">{{ row.id }}</a></td>
                <td class="formula"><a href="{{ row_url }}">{{ row.formula | subscript }}</a></td>
                <td class="molecular_mass" hidden><a href="{{ row_url }}">{% if row.molecular_mass %}{{ "%.1f" | format(row.molecular_mass) }}{% endif %}</a></td>
                <td class="point_group" hidden><a href="{{ row_url }}">{{ row.point_group | point_group_subscript }}</a></td>
                <td class="fullname"><a href="{{ row_url }}">{{ row.full_name or '' }}</a></td>
                <td class="shortname"><a href="{{ row_url }}">{{ row.short_name or '' }}</a></td>
                <td class="charge"><a href="{{ row_url }}">{{ "%.0f" | format(row.charge) if row.charge is not none else '' }}</a></td>
                <td class="spin"><a href="{{ row_url }}">{{ row.spin }}</a></td>
                <td class="xc_functional"><a href="{{ row_url }}">{{ row.xc_functional or '' }}</a></td>
                <td class="basis_set"><a href="{{ row_url }}">{{ row.basis_set or '' }}</a></td>
                <td class="code"><a href="{{ row_url }}">{{ row.code or '' }}</a></td>
                <td class="code_version" hidden><a href="{{ row_url }}">{{ row.code_version or '' }}</a></td>
                <td class="author" hidden><a href="{{ row_url }}">{{ row.author or '' }}</a></td>
                <td class="date" hidden><a href="{{ row_url }}">{{ row.date or '' }}</a></td>
                <td class="total_energy" hidden><a href="{{ row_url }}">{{ "%.3f" | format(row.total_energy | hartree_to_ev) if row.total_energy is not none else '' }}</a></td>
                <td class="gap"><a href="{{ row_url }}">{{ "%.3f" | format(row.fundamental_gap | hartree_to_ev) }}</a></td>
                <td class="ip"><a href="{{ row_url }}">{{ "%.3f" | format(row.ionisation_potential | hartree_to_ev) }}</a></td>
                <td class="ea"><a href="{{ row_url }}">{{ "%.3f" | format(row.electron_affinity | hartree_to_ev) }}</a></td>
                <td class="casida" hidden><a href="{{ row_url }}">{% if row.excitation_count %}<span class="casida-tick"
                            title="{{ 'Excited states available for this molecule' if is_systems else row.excitation_count ~ ' excited states' }}">✓</span>{% endif %}</a></td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</section>
{% endblock %}