{% extends "omeroweb/base.html" %}
{% load i18n %}
{% load markup %}
{% load custom_tags %}

{% block link %}
    <link rel="stylesheet" href="{% url webstatic "css/datepicker.css" %}" type="text/css" />
    <link rel="stylesheet" href="{% url webstatic "css/googiespell.css" %}" type="text/css" media="screen"/>
    <link rel="stylesheet" href="{% url webstatic "css/tooltip.css" %}" type="text/css" media="screen"/>
{% endblock %}

{% block jscript %}
    <script type="text/javascript" src="{% url webstatic "javascript/jquery_1.2.6.js" %}"></script>
    
    <script type="text/javascript" src="{% url webstatic "javascript/jquery.tooltip.js" %}"></script>
    <script type="text/javascript" src="{% url webstatic "javascript/jquery.dimensions.js" %}"></script>
    <script type="text/javascript" src="{% url webstatic "javascript/jquery.bgiframe.js" %}"></script>
    <script type="text/javascript" src="{% url webstatic "javascript/jquery.delegate.js" %}"></script>
    
    <script type="text/javascript" src="{% url webstatic "javascript/ui/ui.core.js" %}"></script>
    <script type="text/javascript" src="{% url webstatic "javascript/ui/ui.datepicker.js" %}"></script>
    
    <script type="text/javascript" src="{% url webstatic "javascript/jquery.simple.tree.js" %}"></script>
    
    <script type="text/javascript" src="{% url webstatic "javascript/googiespell/AJS.js" %}"></script>
    <script type="text/javascript" src="{% url webstatic "javascript/googiespell/googiespell.js" %}"></script>
    <script type="text/javascript" src="{% url webstatic "javascript/googiespell/cookiesupport.js" %}"></script>
{% endblock %}


{% block script %}
    <script type="text/javascript" src="{% url webstatic "javascript/menu.js" %}"></script>
    <script type="text/javascript" src="{% url webstatic "javascript/basket.js" %}"></script>
    <script>
      $(document).ready(function(){
          $('#id_expiration').datepicker({firstDay: 1, dateFormat: 'yy-mm-dd'});
          
      });
    </script>
    <script type="text/javascript">
        $(function() {
            $("#markup_c, #enable, #expire").tooltip({ 
                track: true, 
                delay: 0, 
                showURL: false, 
                opacity: 1, 
                fixPNG: true, 
                showBody: " - ", 
                top: -15, 
                left: 5 
            });
        });
    </script>
    
    <script>
    $(document).ready(function () {
        $(function() { 
            $("#products li.product").css('width', 110);
            $("#products li.product").css('height', 90);
            $('#products img.imgzoom').attr('width', 80);
            $('#products img.catzoom').attr('width', 80);
        });
    })
    </script>
    <script>
    var popup = function (url) {
          window.open(url,'_blank','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=1000,height=800');
          return false;
    }
    </script>
    
{% endblock %}

{% block center %}

{% if basket.sizeOfBasket %}
    <h1>{% trans "Create new share" %} ({{ basket.sizeOfBasket }} {% trans "items" %}):</h1>
    
    <div id="cart">
    
    {% if basket.imgSize %}
    <div class="clear"></div>
    <h1>{% trans "Images" %}</h1>
    <div class="image"><ul id="products">
        {% for e in basket.imageInBasket %}
            <li id="image-{{ e.id }}"class="product"><em>{{ e.name }}</em>
                <a href="#" onclick="return popup('{% url image_viewer e.id %}')"><img id="{{ e.id }}" class="imgzoom" src="{% url render_thumbnail e.id %}" alt="image" title="{{ e.name }}"/></a>
                <a href="#" onclick="fromBasket('image', '{{ e.id }}'); return false;"><img src ="{% url webstatic "images/cancel16.png" %}" alt="r" title="remove"/></a>
            </li>
        {% endfor %}
    </ul></div>
    {% endif %}
    
    <div class="clear"></div>

    <div>
        <form action="{% url manage_share "create" %}" method="post">
            <table>
            {% for field in form %}
                <tr><th>{{ field.label_tag }}{% if field.field.required %}*{% endif %}</th>
                    <td>{{ field }}</td><td>{% if field.errors %}{{ field.errors }}{% endif %}<br/>{{ field.help_text|safe }}</td>
                </tr>
            {% endfor %}
                <tr><td colspan="2"><input type="submit" value="{% trans 'Save' %}" /></td></tr>
            </table>
        </form>
        <script type="text/javascript">
            var googie_spell = new GoogieSpell("static_core/googiespell/", "{% url spellchecker %}"+"?lang=");
            googie_spell.decorateTextarea("id_message", null, "600px");
        </script>
    </div>
{% else %}
    <h1>{% trans "Your basket is empty." %}</h1>
    <div class="error"><p>{% trans "Your basket is empty. Please add some of your bio-data from" %} <a href="{% url manage_data "mydata" %}">{% trans "My data" %}</a>.</p></div>
{% endif %}
{% endblock %}