<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TWall</title>

    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/wall.css') }}" rel="stylesheet">

</head>

<body>
<div class="container">
    <div class="row search-row {% if query is not defined %} vertical-offset {% endif %}">
        <div class="col-sm-8 col-sm-offset-2">
            <h1>Twitter Wall</h1>
            <div class="input-group">
                <div class="input-group-btn search-panel">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                        <span id="search-mode">{{ mode|title }}</span> <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#recent">Recent</a></li>
                        <li><a href="#popular">Popular</a></li>
                        <li><a href="#mixed">Mixed</a></li>
                    </ul>
                </div>
                <input type="hidden" name="search-param" value="{{ mode|title }}" id="search-param">
                <input type="text" class="form-control" id="search-field" name="q" placeholder="Enter search term"
                        {% if query is defined %} value="{{ query }}" {% endif %}>
                <span class="input-group-btn">
                    <button id="search" class="btn btn-default" type="button"><span
                            class="glyphicon glyphicon-search"></span></button>
                </span>
            </div>
        </div>
    </div>

    <ul class="tweets col-sm-8 col-sm-offset-2">
        {% include 'tweets.html' %}
    </ul>
</div>


<script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/wall.js') }}"></script>
</body>
</html>