<script type="text/javascript" src="{{ url_for('static', filename='js/video.omxplayer.js') }}"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='css/video.omxplayer.css') }}"></script>

<div class="row" id="video-container">
    <form action="#" id="video-search">
        <div class="row">
            <label for="video-search-text">
                Supported formats: <tt>file://[path]</tt>, <tt>https://www.youtube.com/?v=[video_id]</tt>, or free text search
            </label>
        </div>

        <div class="row">
            <div class="eleven columns">
                <input type="text" name="video-search-text" placeholder="Search query or video URL">
            </div>
            <div class="one column">
                <button type="submit">
                    <i class="fa fa-search"></i>
                </button>
            </div>
        </div>
    </form>

    <form action="#" id="video-ctrl">
        <!-- <div class="row"> -->
        <!--     <div class="eight columns offset-by-two slider-container" id="video-seeker-container"> -->
        <!--         <span class="seek-time" id="video-elapsed">-:--</span>&nbsp; -->
        <!--         <input type="range" min="0" id="video-seeker" disabled="disabled" class="slider" style="width:75%"> -->
        <!--         &nbsp;<span class="seek-time" id="video-length">-:--</span> -->
        <!--     </div> -->
        <!-- </div> -->

        <div class="row">
            <div class="ten columns offset-by-one">
                <button data-action="previous">
                    <i class="fa fa-step-backward"></i>
                </button>

                <button data-action="backward">
                    <i class="fa fa-backward"></i>
                </button>

                <button data-action="play">
                    <i class="fa fa-play"></i>
                </button>

                <button data-action="pause">
                    <i class="fa fa-pause"></i>
                </button>

                <button data-action="stop">
                    <i class="fa fa-stop"></i>
                </button>

                <button data-action="forward">
                    <i class="fa fa-forward"></i>
                </button>

                <button data-action="next">
                    <i class="fa fa-step-forward"></i>
                </button>
            </div>
        </div>

        <div class="row">
            <div class="eight columns offset-by-two slider-container" id="video-volume-ctrl-container">
                <i class="fa fa-volume-down"></i> &nbsp;
                <input type="range" min="0" max="100" value="100" id="video-volume-ctrl" class="slider" style="width:80%">
                &nbsp; <i class="fa fa-volume-up"></i>
            </div>
        </div>
    </form>

    <div class="row" id="video-results-container">
        <div id="video-results"></div>
    </div>
</div>

