{% extends "superx_budget:pyramid/templates/layout.jinja2" %}

{% block content %}

    <div class="row">
        <div class="col">
            <h2>Procedure to get the right SuperX export</h2>
            <ol class="suprex">
                <li>Log in to <a href="https://www.verwaltung.uni-freiburg.de/superx/" target="_blank" rel="noopener noreferrer">SuperX</a></li>
                <li>
                    <div>Select <span class="text-info">"SAP Berichte (ab 2015)"</span> in the left menu, then <span class="text-info">"Verwendungsnachweis und Kassenstand SAP"</span>.</div>
                    <div><img src="{{request.static_url('superx_budget.pyramid:static/screenshot-1.jpg')}}" alt="screenshot superx, part 1"></div>

                </li>
                <li>
                    <div>Enter the correct year for the report and select <span class="text-info">"automatisch"</span> for the <span class="text-info">"Gruppierung"</span>.</div>
                    <div><img src="{{request.static_url('superx_budget.pyramid:static/screenshot-2.jpg')}}" alt="screenshot superx, part 2"></div>
                </li>
                <li>Generating the list might take some time, please be patient.</li>
                <li>
                    <div>Click on the small Excel icon and download the file to a location where you can find it easily.</div>
                    <div><img src="{{request.static_url('superx_budget.pyramid:static/screenshot-3.jpg')}}" alt="screenshot superx, part 3"></div>
                </li>
            </ol>
            <h4 class="pt-4">Done?</h4>
            <form enctype="multipart/form-data" method="post" action="/">
                <div class="form-group">
                    <label for="fileupload">Then please upload the just exported Excel file:</label>
                    <input id="fileupload" name="superx" type="file" class="form-control-file" />
                </div>
                <button type="submit" name="submit" value="submitted" class="btn btn-primary">Submit</button>
            </form>
        </div>
    </div>
{% endblock content %}