{% extends "imadj/base.html" %}

{% block content %}
    
<div class="page_info_header">
    <h1>Instructions</h1>
</div>
<div class="page_info_content">

    <p>
        When uploading an image, it's width and height pixel dimensions must
        match one of the pre-defined sizes. It also needs to be in a format
        which we can read as expected.
    </p>
    <p>
        On the following page you will be asked for a description for the image
        and a set of tags that it matches. If you have not created any tags yet
        please add them first in the <a href="imagegallery/">gallery</a> view.
    </p>
    <p>
        Shown on the right are the image dimensions and formats that will be
        accepted.
    </p>

    {% if error %}
    <br/>
    <p style="color:red; font-family: monospace;">{{error|safe}}</p>
    <br/>
    {% endif %}

    <table style="float: right; margin: 0 0 20px 20px">
        <tr><td></td><th>Width (px)</th><th>Height (px)</th><th>Format</th></tr>
        {% for size in sizes %}
            <tr><th>{{ size.id }}</th><td>{{ size.width }}</td><td>{{ size.height }}</td><td class="right">{{ size.format }}</td></tr>
        {% endfor %}
    </table>
    <div style="clear:both;"></div>
</div>


<div class="page_info_header">
    <div class="page_info_header_img">
    <img src="/media/imadj/rsrc/img/_bg/upload_arrow_small.png" />
    </div>
    <div class="page_info_header_heading">
    <h1>Upload from file</h1>
    </div>
</div>
<div class="page_info_content">
    <form action="" method="post" enctype="multipart/form-data">
        <p><label for="image_upload">Select file for upload:</label>
        <input type="file" name="image_upload"/></p>
        <p>{% csrf_token %}<input type="submit" value="Upload" class="default" /></p>
    </form>
</div>

<div class="page_info_header">
    <div class="page_info_header_img">
    <img src="/media/imadj/rsrc/img/_bg/upload_arrow_small.png" />
    </div>
    <div class="page_info_header_heading">
    <h1>Upload from URL</h1>
    </div>
</div>
<div class="page_info_content">
    <form action="" method="post" enctype="multipart/form-data">
    <p><label for="image_url">Paste the URL here : </label><input type="text" name="image_url"/></p>
    <p>{% csrf_token %}<input type="submit" value="Upload" class="default"/></p>
    </form>
</div>
    
{% endblock %}