{% extends "yacon/nexus_base.html" %}

{% block scripts %}
    {{ block.super }}

    <script type="text/JavaScript" 
      src="/static/yacon/js/yacon/config/buttons.js"></script>
    <script type="text/JavaScript" 
      src="/static/yacon/js/yacon/config/dialogs.js"></script>
    <script type="text/JavaScript" 
      src="/static/yacon/js/yacon/config/ready.js"></script>
    <script type="text/JavaScript">
        $(document).ready(function(){
            $('#navbar').tabnav('select_by_id', 'nav_settings');
        });
    </script>
{% endblock scripts %}

{% block content %}
<div class="inside">
    <div id="settings_content">
        <h1> Settings </h1>

        <h2> Languages </h2>
        {% if langs %}
        <ul>
        {% endif %}
        {% for lang in langs %}
            <li> {{lang.name}} ({{lang.code}}) </li>
        {% endfor %}
        {% if langs %}
        </ul>
        {% endif %}

        <button id="add_language_button">Add Language</a>
    </div>

    <div id="add_language_dialog">
        <p>
            Enter the name and identifier for the new language.
        </p>
        <form id="add_language_form">
            <table class="dialog_form_table">
                <tr>
                    <th> <label for="add_language_name">Name</label> </th>
                    <td> 
                        <input type="text" name="name" id="add_language_name"/>
                    </td>
                </tr>
                <tr>
                    <th> 
                        <label for="add_language_identifier">Identifier</label> 
                    </th>
                    <td> 
                        <input type="text" name="identifier" 
                            id="add_language_identifier" /> 
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>
{% endblock content %}
