{% extends "base_v2.html" %}
{% block upload_codes %} class="current" {% end %}
{% block content %}
<title>Upload project codes</title>
<link rel="stylesheet" href="/static/animations.css"/>

<div class="uk-flex-inline cm-nav-container uk-margin-medium-bottom">
    <div class="cm-left-box"><a href="/"><button id="cancel-main-btn" class="uk-close-large cm-close-btn" type="button" uk-close></button></a></div>
    <div class="cm-navigation cm-nav-toolbar">
        <ul class="uk-subnav uk-subnav-line">
            <li class="cm-nav-li cm-nav-active">
                <a class="cm-nav-a">
                    <div class="cm-nav-number-container"><span class="cm-nav-number uk-text-middle">1</span></div>
                    <span class="cm-nav-title uk-text-middle">Matching context<br>definition</span>
                </a>
            </li>
            <li class="cm-nav-li cm-nav-disabled">
                <a class="cm-nav-a">
                    <div class="cm-nav-number-container"><span class="cm-nav-number uk-text-middle">2</span></div>
                    <span class="cm-nav-title uk-text-middle">Matching proccess<br>configuration</span>
                </a>
            </li>
            <li class="cm-nav-li cm-nav-disabled">
                <a class="cm-nav-a">
                    <div class="cm-nav-number-container"><span class="cm-nav-number uk-text-middle">3</span></div>
                    <span class="cm-nav-title uk-text-middle">Save your<br>matching profile</span>
                </a>
            </li>
        </ul>
    </div>
</div>

<div class="uk-container uk-container-small">
    <h4>Input options</h4>
    <p class="uk-text-small">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<!--     <form id="codes-file-input-form" method="post" enctype="multipart/form-data" accept-charset="UTF-8">
        <div class="uk-margin">
            <div uk-form-custom>
                <input type="file" name="upload" id="codes-file-input" class="inputfile" />
                <strong><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg></strong>
                <button class="uk-button uk-button-default" type="button" tabindex="-1">Choose file</button>
            </div>
        </div>
    </form> -->

    <div class="js-upload uk-placeholder cm-file-drop-area cm-coloured-text">
        <div class="uk-flex uk-flex-middle uk-grid-collapse uk-child-width-expand@s" uk-grid>
            <div>
                <span uk-icon="icon: cloud-upload"></span>
                <span class="uk-text-middle"> Upload matching context .tsv file type</span>
                <span class="cm-tooltip" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom" uk-icon="icon: info"></span>
            </div>
            <div uk-form-custom>
                <input type="file" name="upload" id="codes-file-input" class="inputfile" />
                <button class="uk-button uk-button-default cm-main-button" type="button" tabindex="-1">Choose file</button>
            </div>
        </div>
    </div>
    <progress id="js-progressbar" class="uk-progress" value="0" max="100" hidden></progress>


<!--     <div class="test-upload uk-placeholder uk-text-center">
        <p><span uk-icon="icon: upload; ratio: 3.5"></span></p>
        <p>
            <span class="uk-text-middle">Attach project codes by dropping them here or</span>
            <div uk-form-custom>
                <input type="file">
                <span class="uk-link">browse file</span>
            </div>
        </p>
        <p>
            <span class="uk-label uk-margin-small-right">TSV</span><span class="uk-label">TXT</span>
            <span class="uk-text">file types</span>
        </p>
        <p class="uk-text-middle">Maximum 10MB upload</p>
    </div> -->


    <div class="uk-heading-line uk-text-center uk-margin-small-top uk-margin-small-bottom"><span>or</span></div>

    <input id="initial-type-input" class="uk-form-width-medium uk-form-large uk-width-1-1 uk-text-center uk-margin-bottom cm-text-input" type="text" style="display: none;" placeholder="Start typing project code or Paste project list">

    <table id="data-table" class="uk-table uk-table-striped uk-table-hover cm-table">
        <thead>
            <tr>
                <!-- <th class="uk-table-shrink cm-table-number">#</th> -->
                <th class="uk-width-small">Keyword</th>
                <th class="uk-table-expand">Context</th>
                <th class="uk-table-shrink"></th>
                <th class="uk-table-shrink"></th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <!-- <td class="cm-table-number"></td> -->
                <td colspan="4" class="cm-table-footer"><button id="add-row-below" class="uk-button uk-button-small uk-button-default uk-width-1-1 uk-text-center cm-main-button">
                    <span class="uk-text-middle"><span uk-icon="icon: plus-circle"></span> Create new</span>
                </button></td>
            </tr>
        </tfoot>
        <tbody>
        </tbody>
    </table>

    <button id="next-button" class="uk-button uk-button-primary uk-margin-top uk-float-right" disabled>Next</button>
    <div >
    </div>
</div>

<script src="/static/upload-codes.js" type="text/javascript"></script>
{% end %}