{% load i18n %}

<button type="button" class="btn btn-default"
    ng-click="service.forms.sql.toggle_dropdown('vizier')"
    ng-class="{'active': service.forms.sql.dropdown == 'vizier'}">

    {% trans 'VizieR' %} <span class="caret"></span>
</button>

<div class="daiquiri-query-dropdown" ng-show="service.forms.sql.dropdown == 'vizier'">
    <div class="daiquiri-query-dropdown-head">
        <form class="daiquiri-query-dropdown-form" ng-submit="service.dropdowns.vizier.query()">
            <div class="input-group">
                <input type="text" class="form-control"
                    placeholder="{% trans 'Object name or coordinates' %}"
                    ng-model="service.dropdowns.vizier.values.query"/>
                <span class="input-group-btn">
                    <input type="submit" class="btn btn-default" value="{% trans 'Search on VizieR' %}" />
                </span>
            </div>
        </form>
    </div>

    <div class="daiquiri-query-dropdown-body">
        <ul class="text-danger list-unstyled">
            <li ng-repeat="error in service.dropdowns.vizier.errors">{$ error $}</li>
        </ul>

        <table class="table" ng-show="service.dropdowns.vizier.results.length">
            <thead>
                <th>{% trans 'ID' %}</th>
                <th>{% trans 'Coordinates' %}</th>
                <th>{% trans 'Distance' %}</th>
                <th>{% trans 'Catalog' %}</th>
            </thead>
            <tbody>
                <tr ng-repeat="row in service.dropdowns.vizier.results">
                    <td>
                        <a href="" ng-click="service.forms.sql.paste_string(row.id)"
                            title="{% trans 'Paste ID to query field' %}">
                            {$ row.id $}
                        </a>
                    </td>
                    <td>
                        <a href="" ng-click="service.forms.sql.paste_string(row.ra)"
                            title="{% trans 'Paste RA to query field' %}">
                            {$ row.ra $}
                        </a>
                        <a href="" ng-click="service.forms.sql.paste_string(row.de)"
                            title="{% trans 'Paste DE to query field' %}">
                            {$ row.de $}
                        </a>
                    </td>
                    <td>
                        <a href="" ng-click="service.forms.sql.paste_string(row.distance)"
                            title="{% trans 'Paste distance to query field' %}">
                            {$ row.distance $}
                        </a>
                    </td>
                    <td>
                        {$ row.catalog $}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <p class="help-block small">
        {% trans 'A click will paste a value into the query field.' %}
    </p>
</div>
