{#
    Copyright (c) 2015 Chintalagiri Shashank
    Released under the MIT license
#}

{% extends "base_templates/base.html" %}
{% import "parts/gsymlib_symbol.html" as gsymlib_symbol %}

{% block main %}

<div class="row">
    <div class="small-12 medium-5 large-4 columns">
        <h3 class="x-pad-top"> gEDA Symbol Library </h3>
        <div class="row">
        <form action="#" method="POST">
            <fieldset>
            <legend>Go to Symbol</legend>
            <div class="row">
                <div class="large-12 columns">
                    <div class="row collapse {% if stage.ferror %} error {% endif %}">
                    <div class="small-10 columns">
                        <input type="text" name="ident" placeholder="Ident" list="json-identlist" autocomplete="off">
                        {% if stage.ferror %}<small class="error">Ident not recognized</small>{% endif %}
                    </div>
                    <div class="small-2 columns">
                        <button type="submit" class="button postfix">Go</button>
                    </div>

                    </div>
                </div>
            </div>
            </fieldset>
        </form>
        </div>
        <div class="row">
            <a href="/gsymlib/browse" class="button expand radius">
                Browse Symbol Library
            </a>
        </div>
    </div>
    <div class="small-12 medium-7 large-8 columns panel header radius">
        <div class="sign small-9 medium-6 small-centered columns autoscale">
            <h6>Most Recently Changed</h6>
        </div>
        <div class="small-12 columns">
            <ul class="small-block-grid-1 medium-block-grid-1 large-block-grid-2" data-equalizer="symbol">
            {% for symbol in stage.recent_symbols %}
                <li>
                {{ gsymlib_symbol.render_symbol(symbol, stage.show_images, True) }}
                </li>
            {% endfor %}
            </ul>
        </div>
    </div>
</div>

<script>
    $(document).ready( function () {

        <!-- Ident List Starts -->

        // Load in the library information
        var dataList = document.getElementById('json-identlist');
        var request = new XMLHttpRequest();

        // Handle state changes for the request.
        request.onreadystatechange = function(response) {
          if (request.readyState === 4) {
            if (request.status === 200) {
              // Parse the JSON
              var jsonOptions = JSON.parse(request.responseText);

              // Loop over the JSON array.
              jsonOptions.idents.forEach(function(item) {
                // Create a new <option> element.
                var option = document.createElement('option');
                // Set the value using the item in the JSON array.
                option.value = item;
                // Add the <option> element to the <datalist>.
                dataList.appendChild(option);
              });
            }
          }
        };

        request.open('GET', '/gsymlib/idents.json', true);
        request.send();

        <!-- Ident List Ends -->
    });
</script>

<datalist id="json-identlist"></datalist>

{% endblock %}
