<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>

    <title>{{ title }}</title>
    <meta name="description" content="{{ description }}"/>
</head>

<body>

<div id="content">
    <div class="rect_icon"
         style="background-color: rgb({{atom_color_rgb[0]}}, {{atom_color_rgb[1]}}, {{atom_color_rgb[2]}} )"></div>
    <div class="headline headline_atom"> {{ atom_fullname }}</div>

    <table class="table_margin_upper_table">
        <tr>
            <td>position:</td>
            <td>( {{ "%.4f, %.4f, %.4f"|format(atom_positions[0], atom_positions[1], atom_positions[2]) }} )</td>
        </tr>
        <tr>
            <td>atomic number:</td>
            <td>{{ atom_number }}</td>
        </tr>
        <tr>
            <td>covalent radius:</td>
            <td>{{ "%.4f"|format(covalent_radius) }} &#x212b; </td>
        </tr>
        <tr>
            <td>cutoff radius:</td>
            <td>{{ "%.4f"|format(cutoff_radius) }} &#x212b; </td>
        </tr>
        <!--<tr>
            <td>surface cavities: </td>
            <td>todo</td>
        </tr>
        <tr>
            <td>center cavities:</td>
            <td>todo</td>
        </tr>
        <tr>
            <td>domains: </td>
            <td>todo</td>
        </tr>-->
        <tr>
            <td> &nbsp; </td>
            <td><a href="gui:focus/{{atom_positions[0]}}/{{atom_positions[1]}}/{{atom_positions[2]}}">Focus</a></td>
        </tr>
        <tr>
            <td> &nbsp; </td>
            <td><a href="gui:hideothers/atom/{{ index+1 }}">Hide all other atoms</a></td>
        </tr>
        <tr>
            <td> &nbsp; </td>
            <td><a href="gui:hideothers/element/{{ atom_number }}">Hide all atoms of a different element</a></td>
        </tr>
        <tr>
            <td> &nbsp; </td>
            <td><a href="gui:addtovisible/atom/{{ index+1 }}">Add to list of visible atoms</a></td>
        </tr>
        <tr>
            <td> &nbsp; </td>
            <td><a href="gui:showall/atoms">Show all atoms</a></td>
        </tr>
        <tr>
            <td> &nbsp; </td>
            <td> &nbsp; </td>
        </tr>
    </table>

    <!--<table>

        <tr>
            <td><strong>Bonding Information:</strong></td>
            <td> &nbsp; </td>
        </tr>
        <tr>
            <td>Bond criterion:</td>
            <td>Radii sum</td>
        </tr>
        <tr>
            <td>Radii sum factor:</td>
            <td>todo</td>
        </tr>
        <tr>
            <td> &nbsp; </td>
            <td> &nbsp; </td>
        </tr>
    </table>-->
    {% if bonds: %}
    <table>
        <tr>
            <strong>
                <td>bonded atoms</td>
                <!--<td>covalence</td>
                <td>bond length</td>-->
            </strong>
        </tr>
        {% for bond in bonds %}
        <tr>
            <td><a href="gui:atom/{{bond}}">Atom {{ bond+1 }}</a></td>
            <!--<td>todo</td>
            <td>todo</td>-->
        </tr>
        {% endfor %}
        <tr>
            <td> &nbsp; </td>
            <td> &nbsp; </td>
            <td> &nbsp; </td>
        </tr>
    </table>

    <!--<p>bond angles:</p>
    <table style="text-align: center;">
        {% set bond_list = [index] + bonds %}

        <tr>
            <td><strong>Atom</strong></td>
            {% for atom in bond_list %}
                <td>{{atom+1}}</td>
            {% endfor %}
        </tr>
        {% for ar in bond_list: %}
            <tr>
            {% for ac in bond_list: %}
                {% if loop.index == 1: %}
                    <td>{{ ar+1 }}</td>
                {% endif %}

                {% if ac == ar: %}
                    <td>–</td>
                {% else: %}
                    <td>todo</td>
                {% endif %}
            {% endfor %}
            </tr>
        {% endfor %}
        </tr>
    </table>-->
    {% endif %}

</div>

</body>
</html>
