<div class="periodic-table-container">
    <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
        <div class="card">
          <div class="card-header">
            Periodic table actions
          </div>
          <ul class="list-group list-group-flush">
            <li class="list-group-item">
                <button type="submit" id="periodic-search" class="btn btn-primary w-100">
                    <i class="fas fa-search"></i> Search
                </button>
            </li>
            <li class="list-group-item">
                <button type="button" id="periodic-clear" class="btn btn-secondary w-100">
                    <i class="fas fa-undo"></i> Clear
                </button>
            </li>
          </ul>
        </div>
    </div>
    <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12">
    {{data.search_form.elements}}
    {{data.search_form.query_id}}
    {{data.search_form.user_id}}
    {{data.search_form.order_by_field}}
    {%if data.error%}<div class="text-danger">{{data.error}}</div>{%endif%}
    <table class="periodic-table">
        <tr>
            <td></td>
            <td class="c-header">IA</td>
            <td colspan="16"></td>
            <td class="c-header">0</td>
        </tr><tr>
            <td class="r-header">1</td>
            <td class="p-elem green">H</td>
            <td class="c-header">IIA</td>
            <td colspan="10" class="title">Select one element by clicking on the element.</td>
            <td class="c-header">IIIA</td>
            <td class="c-header">IVA</td>
            <td class="c-header">VA</td>
            <td class="c-header">VIA</td>
            <td class="c-header">VIIA</td>
            <td class="p-elem orange">He</td>
        </tr><tr>
            <td class="r-header">2</td>
            <td class="p-elem blue">Li</td>
            <td class="p-elem lightblue">Be</td>
            <td colspan="10"></td>
            <td class="p-elem purple">B</td>
            <td class="p-elem green">C</td>
            <td class="p-elem green">N</td>
            <td class="p-elem green">O</td>
            <td class="p-elem yellow">F</td>
            <td class="p-elem orange">Ne</td>
        </tr><tr>
            <td class="r-header">3</td>
            <td class="p-elem blue">Na</td>
            <td class="p-elem lightblue">Mg</td>
            <td class="c-header">IIIB</td>
            <td class="c-header">IVB</td>
            <td class="c-header">VB</td>
            <td class="c-header">VIB</td>
            <td class="c-header" colspan="3">VIIB</td>
            <td class="c-header">VIIIB</td>
            <td class="c-header">IB</td>
            <td class="c-header">IIB</td>
            <td class="p-elem cyan">Al</td>
            <td class="p-elem purple">Si</td>
            <td class="p-elem green">P</td>
            <td class="p-elem green">S</td>
            <td class="p-elem yellow">Cl</td>
            <td class="p-elem orange">Ar</td>
        </tr><tr>
            <td class="r-header">4</td>
            <td class="p-elem blue">K</td>
            <td class="p-elem lightblue">Ca</td>
            <td class="p-elem gray">Sc</td>
            <td class="p-elem gray">Ti</td>
            <td class="p-elem gray">V</td>
            <td class="p-elem gray">Cr</td>
            <td class="p-elem gray">Mn</td>
            <td class="p-elem gray">Fe</td>
            <td class="p-elem gray">Co</td>
            <td class="p-elem gray">Ni</td>
            <td class="p-elem gray">Cu</td>
            <td class="p-elem gray">Zn</td>
            <td class="p-elem cyan">Ga</td>
            <td class="p-elem purple">Ge</td>
            <td class="p-elem purple">As</td>
            <td class="p-elem green">Se</td>
            <td class="p-elem yellow">Br</td>
            <td class="p-elem orange">Kr</td>
        </tr><tr>
            <td class="r-header">5</td>
            <td class="p-elem blue">Rb</td>
            <td class="p-elem lightblue">Sr</td>
            <td class="p-elem gray">Y</td>
            <td class="p-elem gray">Zr</td>
            <td class="p-elem gray">Nb</td>
            <td class="p-elem gray">Mo</td>
            <td class="p-elem gray">Tc</td>
            <td class="p-elem gray">Ru</td>
            <td class="p-elem gray">Rh</td>
            <td class="p-elem gray">Pd</td>
            <td class="p-elem gray">Ag</td>
            <td class="p-elem gray">Cd</td>
            <td class="p-elem cyan">In</td>
            <td class="p-elem cyan">Sn</td>
            <td class="p-elem purple">Sb</td>
            <td class="p-elem purple">Te</td>
            <td class="p-elem yellow">I</td>
            <td class="p-elem orange">Xe</td>
        </tr><tr>
            <td class="r-header">6</td>
            <td class="p-elem blue">Cs</td>
            <td class="p-elem lightblue">Ba</td>
            <td class="p-elem gray">La</td>
            <td class="p-elem gray">Hf</td>
            <td class="p-elem gray">Ta</td>
            <td class="p-elem gray">W</td>
            <td class="p-elem gray">Re</td>
            <td class="p-elem gray">Os</td>
            <td class="p-elem gray">Ir</td>
            <td class="p-elem gray">Pt</td>
            <td class="p-elem gray">Au</td>
            <td class="p-elem gray">Hg</td>
            <td class="p-elem cyan">Tl</td>
            <td class="p-elem cyan">Pb</td>
            <td class="p-elem cyan">Bi</td>
            <td class="p-elem purple">Po</td>
            <td class="p-elem yellow">At</td>
            <td class="p-elem orange">Rn</td>
        </tr><tr>
            <td class="r-header">7</td>
            <td class="p-elem blue">Fr</td>
            <td class="p-elem lightblue">Ra</td>
            <td class="p-elem gray">Ac</td>
            <td colspan="12"></td>
        </tr><tr>
            <td colspan="19"></td>
        </tr><tr>
            <td colspan="4" class="r-header">Lanthanides</td>
            <td class="p-elem darkgray">Ce</td>
            <td class="p-elem darkgray">Pr</td>
            <td class="p-elem darkgray">Nd</td>
            <td class="p-elem darkgray">Pm</td>
            <td class="p-elem darkgray">Sm</td>
            <td class="p-elem darkgray">Eu</td>
            <td class="p-elem darkgray">Gd</td>
            <td class="p-elem darkgray">Tb</td>
            <td class="p-elem darkgray">Dy</td>
            <td class="p-elem darkgray">Ho</td>
            <td class="p-elem darkgray">Er</td>
            <td class="p-elem darkgray">Tm</td>
            <td class="p-elem darkgray">Yb</td>
            <td class="p-elem darkgray">Lu</td>
            <td></td>
        </tr><tr>
            <td colspan="4" class="r-header">Actinides</td>
            <td class="p-elem darkgray">Th</td>
            <td class="p-elem darkgray">Pa</td>
            <td class="p-elem darkgray">U</td>
            <td class="p-elem darkgray">Np</td>
            <td class="p-elem darkgray">Pu</td>
            <td class="p-elem darkgray">Am</td>
            <td class="p-elem darkgray">Cm</td>
            <td class="p-elem darkgray">Bk</td>
            <td class="p-elem darkgray">Cf</td>
            <td class="p-elem darkgray">Es</td>
            <td class="p-elem darkgray">Fm</td>
            <td class="p-elem darkgray">Md</td>
            <td class="p-elem darkgray">No</td>
            <td class="p-elem darkgray">Lr</td>
            <td></td>
        </tr>
    </table>
    </div>
</div>



