{% extends 'base.html' %}
{% block content %}

<form id="add_word_form" action="" role="form" method="post" enctype="multipart/form-data">

    <div class="form-group">
        <label for="word">Word</label>
        <input type="text" class="form-control" id="word" aria-describedby="wordHelp" placeholder="Enter word" name="word" step="any">
        <small id="wordHelp" class="form-text text-muted">Add a word.</small>
    </div>

    <div class="form-group">
        <label for="ytLink">Youtube link</label>
        <input type="text" class="form-control" id="ytLink" aria-describedby="ytLinkHelp" placeholder="Enter Youtube link" name="ytLink" step="any">
        <small id="ytLinkHelp" class="form-text text-muted">Add youtube link for word.</small>
    </div>

    <div class="form-group">
        <label for="uploadFile">Or add an mp3</label>
        <input type="file" class="form-control"  aria-describedby="uploadFileHelp" placeholder="" name="uploadFile"/>
        <small id="uploadFileHelp" class="form-text text-muted">Or enter a local-file path to an mp3 file.</small>
    </div>

    <button id="add_word_button" type="submit" class="btn btn-primary">Submit</button>
</form>
<!--
    <script>
        $('#add_word_button').click(function() {
            local_path= $('#uploadFile').val()
            console.log('local_path ' + local_path);

            $('#add_word_form').attrs('enctype=multipart/form');
        });
    </script>
    -->
{%  endblock content %}