{% extends "layout.html" %}

{% block main_content %}
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div class="jumbotron">
                <div id="content-header"></div>
            </div>
        </div>
    </div>
    <div class="row">
        <div id="content-background"></div>
        <div id="content-display"></div>
        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
            <div id="form"></div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
            <div id="results-container">
                <div id="display-toggle"></div>

                <div class="progress progress-striped active hidden">
                    <div class="progress-bar"  role="progressbar" aria-valuenow="100" style="width: 100%"></div>
                </div>

                <!--
                <div id="data-results-filter">
                    <h4>Filter results</h4>
                    <label class="checkbox-inline" for="instagram">
                        <input type="checkbox" name="instagram" value=".instagram" id="instagram" checked> Instagram
                    </label>
                    <label class="checkbox-inline" for="twitter">
                        <input type="checkbox" name="twitter" value=".twitter" id="twitter" checked> Twitter
                    </label>
                </div>
                -->

                <div id="data-results" class="hidden"></div>
                <div id="content-map-canvas" class="initial"></div>
            </div>
        </div>
    </div>

    <script id="content-header-template" type="text/template">
        <h1>Searchstagram</h1>
        <p>A quick way to search Instagram photos and Tweets near you.</p>
        <h2>Search by <a class="addressSearch" href="javascript:void(0)">address</a> or <a class="findMe" href="javascript:void(0)">your location</a>.</h2>
    </script>

    <script id="address-form-template" type="text/template">
        <form id="submission-form" class="form-vertical" role="form">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <label for="addressSearch">Enter an address</label>
                    <input type="text" class="form-control" id="addressSearch" placeholder="Enter an address">
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <label for="countSearch">Number of results</label>
                    <input type="number" class="form-control" name="count" id="countSearch" value="12">
                </div>
            </div>
            <div class="row">
                <div class="hidden col-xs-12 col-sm-6 col-md-6 col-lg-6">
                    <label for="latitudeSearch">Latitude</label>
                    <input type="text" class="form-control" name="lat" id="latitudeSearch">
                </div>
                <div class="hidden col-xs-12 col-sm-6 col-md-6 col-lg-6">
                    <label for="longitudeSearch">Longitude</label>
                    <input type="text" class="form-control" name="lng" id="longitudeSearch">
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                    <label for="startDate">Start Date</label>
                    <input type="date" class="form-control" name="startDate" id="startDate">
                </div>
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                    <label for="startDate">Start Time</label>
                    <input type="time" class="form-control" name="startTime" id="startTime">
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                    <label for="endDate">End Date</label>
                    <input type="date" class="form-control" name="endDate" id="endDate">
                </div>
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                    <label for="startDate">End Time</label>
                    <input type="time" class="form-control" name="endTime" id="endTime">
                </div>
            </div>
            <!--
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <label for="radiusSearch">Search Radius</label>
                <input type="text" class="form-control" name="radius" id="radiusSearch" value="2km">
            </div>
            -->
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <button type="button" class="btn btn-success btn-group btn-group-justified" id="submit">Submit</button>
                </div>
            </div>
        </form>
    </script>

    <script id="location-form-template" type="text/template">
        <form id="submission-form" class="form-vertical" role="form">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <label for="countSearch">Number of results</label>
                    <input type="number" class="form-control" name="count" id="countSearch" value="12">
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                    <label for="latitudeSearch">Latitude</label>
                    <input type="text" class="form-control" name="lat" id="latitudeSearch">
                </div>
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                    <label for="longitudeSearch">Longitude</label>
                    <input type="text" class="form-control" name="lng" id="longitudeSearch">
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                    <label for="startDate">Start Date</label>
                    <input type="date" class="form-control" name="startDate" id="startDate">
                </div>
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                    <label for="startDate">Start Time</label>
                    <input type="time" class="form-control" value="12:00" name="startTime" id="startTime">
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                    <label for="endDate">End Date</label>
                    <input type="date" class="form-control" name="endDate" id="endDate">
                </div>
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                    <label for="startDate">End Time</label>
                    <input type="time" class="form-control" value="12:00" name="endTime" id="endTime">
                </div>
            </div>
            <!--
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <label for="radiusSearch">Search Radius</label>
                <input type="text" class="form-control" name="radius" id="radiusSearch" value="2km">
            </div>
            -->
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <button type="button" class="btn btn-success btn-group btn-group-justified" id="submit">Submit</button>
                </div>
            </div>
        </form>
    </script>

    <script id="data-results-template" type="text/template">
        <% if (obj.result_type === 'instagram') { %>
            <div class="instagram">
                <h3><a href="http://instagram.com/<%= user %>" target="_blank"><%= user %></a></h3>
                <p>(<%= user_full_name %>)</p>
                <img src="<%= image_source %>" class="responsive" />
                <p><%= latitude %>, <%= longitude %></p>
                <p><%= time_date %></p>
                <% if (obj.caption) { %>
                    <p><%= obj.caption.substring(0, 25) %>...</p>
                <% } %>
            </div>
        <% } else { %>
            <div class="twitter">
                <h3><a href="https://twitter.com/<%= user %>/status/<%= link %>" target="_blank"><%= user %></a></h3>
                <p>(<%= user_full_name %>)</p>
                <p><%= latitude %>, <%= longitude %></p>
                <p><%= time_date %></p>
                <p><%= caption %></p>
            </div>
        <% } %>
    </script>

    <script id="display-toggle-template" type="text/template">
        <a id="map-view" class="btn btn-primary active" href="javascript:void(0)">Map</a>
        <a id="list-view" class="btn btn-primary" href="javascript:void(0)">List</a>
        <a id="export-view" class="btn btn-primary" href="/download-csv">Export</a>
    </script>
{% endblock %}