{% extends "common/selection.html" %}
{% load static %}

{% block addon_js %}
    <script>

        var type_of_selection = '{{ type_of_selection }}';
        var selection_only_receptors = '{{ selection_only_receptors }}';
        var redirect_url = '{{ buttons.continue.url }}'
        var redirect_on_select = '{{ redirect_on_select }}'


    $(document).ready(function() {
        $(function(){
          // bind change event to select
          $('#preloaded_xtals').on('change', function () {
            var url = window.location.href;

            if (url.substr(-1) == '/') url = url.substr(0, url.length - 2);

            url = url.split('/');
            url.pop();
            url = url.join('/')+"/interaction/"+$(this).val(); // get selected value
            if (url) { // require a URL
                window.location = url; // redirect
            }

            toggleButtonClass('selection-button');
            $("#selection-targets").html("<p><span class='selection-heading-text'>Selected targets</span></p>"+$(this).val());
            return false;
          });
        });
    }); 

        function submitupload() {
            $("#errormsg").remove();
            var pdbid = $('#form').find('input#id_pdbname').val();
            var filename = $('input[type=file]').val().split('\\').pop();
              if (pdbid) {
                var pdb_ids = JSON.parse("{{pdb_ids|escapejs}}");
                if (pdbid.toUpperCase() in pdb_ids) {
                    $("#selection-targets").html("<p><span class='selection-heading-text'>Selected targets</span></p>PDB code: "+pdbid);
                    document.getElementById("form").submit();
                }
                else {
                    showAlert("Incorrect PDB code, not a GPCR or not yet added to GPCRdb", "danger");
                    toggleButtonClass('selection-button');
                    return false;
                }
              } else if (filename) {
                $("#selection-targets").html("<p><span class='selection-heading-text'>Selected targets</span></p>File: "+filename);
                document.getElementById("form").submit();
              } else if ($(".target-selection").length) {
                var url = window.location.href;

                if (url.substr(-1) == '/') url = url.substr(0, url.length - 2);

                url = url.split('/');
                url.pop();
                url = url.join('/')+"/calculate"; // get selected value
                if (url) { // require a URL
                    window.location = url; // redirect
                }
                //toggleButtonClass('selection-button');
                return false
                //document.getElementById("form").submit();
              } else {
                $("#form").parent('div').parent('div').parent('div').after('<div id="errormsg" class="col-md-12 panel panel-primary">' +
                    '<div class="panel-body">' +
                    'Please make a selection' +
                    '</div>' +
                    '</div>');
                toggleButtonClass('selection-button');
              }
        };
    </script>
    <script src="{% static 'home/js/selection.js' %}"></script>
    <script src="{% static 'home/js/selection-autocomplete.js' %}"></script>
    <script src="{% static 'home/js/selection-filters.js' %}"></script>

{% endblock %}

{% block middle_column %}


<!--             <div class="col-md-12 panel panel-primary">
                <div class="panel-body">
                    <h4>Select from interactions pre-calculated</h4>
                    <div>
                    <select id='preloaded_xtals'>
                    <option>Select from list</option>
                    {% for structure in structures %}
                        <option value="{{structure.structure_ligand_pair__structure__pdb_code__index}}">{{structure.structure_ligand_pair__structure__pdb_code__index}} ({{structure.structure_ligand_pair__structure__protein_conformation__protein__parent__entry_name}}) </option>
                    {% endfor %}
                    </select>
                    </div>
                </div>
            </div>
 -->
            <div class="col-md-12 panel panel-primary">
                <div class="panel-body">
                    <div>
                        
                            <form action="calculatepdb" id="form" method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                            <label for="pdbname">Enter PDB code:</label>
                            {{ form.pdbname }} <br> or 
                            <p><label for="pdbname">Upload PDB file:</label>{{ form.file }}</p> 
                        </form>
                    </div>
                </div>
            </div>
{% endblock %}