@using PlexRequests.UI.Helpers
@{
    var baseUrl = Html.GetBaseUrl();
    var url = string.Empty;
    if (!string.IsNullOrEmpty(baseUrl.ToHtmlString()))
    {
        url = "/" + baseUrl.ToHtmlString();
    }
}
<div>
    <h1>Search</h1>
    <h4>Want to watch something that is not currently on Plex?! No problem! Just search for it below and request it!</h4>
    <br />
    <!-- Nav tabs -->


    <ul id="nav-tabs" class="nav nav-tabs" role="tablist">
        @if (Model.SearchForMovies)
        {
            <li role="presentation" class="active">
                <a href="#MoviesTab" aria-controls="home" role="tab" data-toggle="tab"><i class="fa fa-film"></i> Movies</a>

            </li>
        }
        @if (Model.SearchForTvShows)
        {
            <li role="presentation">
                <a href="#TvShowTab" aria-controls="profile" role="tab" data-toggle="tab"><i class="fa fa-television"></i> TV Shows</a>

            </li>
        }
        @if (Model.SearchForMusic)
        {
            <li role="presentation">
                <a href="#MusicTab" aria-controls="profile" role="tab" data-toggle="tab"><i class="fa fa-music"></i>Albums</a>
            </li>
        }

        <li role="presentation" class="nav-tab-right nav-tab-icononly">
            <a href="#NotificationsTab" aria-controls="profile" role="tab" data-toggle="tab"><i class="fa fa-bell"></i></a>

        </li>

    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        @if (Model.SearchForMovies)
        {
            <!-- Movie tab -->
            <div role="tabpanel" class="tab-pane active" id="MoviesTab">
                <div class="input-group">
                    <input id="movieSearchContent" type="text" class="form-control form-control-custom form-control-search form-control-withbuttons">
                    <div class="input-group-addon">
                        <div class="btn-group">
                            <a href="#" class="btn btn-sm btn-primary-outline dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                                Suggestions
                                <i class="fa fa-chevron-down"></i>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a id="moviesComingSoon" href="#">Coming Soon</a></li>
                                <li><a id="moviesInTheaters" href="#">In Theaters</a></li>
                            </ul>
                        </div>
                        <i id="movieSearchButton" class="fa fa-search"></i>
                    </div>
                </div>
                <br />
                <br />
                <!-- Movie content -->
                <div id="movieList">
                </div>
            </div>
        }


        @if (Model.SearchForTvShows)
        {
    <!-- TV tab -->
            <div role="tabpanel" class="tab-pane" id="TvShowTab">
                <div class="input-group">
                    <input id="tvSearchContent" type="text" class="form-control form-control-custom form-control-search">
                    <div class="input-group-addon">
                        <i id="tvSearchButton" class="fa fa-search"></i>
                    </div>
                </div>
                <br />
                <br />
                <!-- TV content -->
                <div id="tvList">
                </div>
            </div>
        }

        @if (Model.SearchForMusic)
        {
            <!-- Music tab -->
            <div role="tabpanel" class="tab-pane" id="MusicTab">
                <div class="input-group">
                    <input id="musicSearchContent" type="text" class="form-control form-control-custom form-control-search">
                    <div class="input-group-addon">
                        <i id="musicSearchButton" class="fa fa-search"></i>
                    </div>
                </div>
                <br />
                <br />
                <!-- Music content -->
                <div id="musicList">
                </div>
            </div>
        }

        <!-- Notification tab -->
        <div role="tabpanel" class="tab-pane" id="NotificationsTab">
            <div class="input-group">
                <div class="input-group-addon input-group-sm"></div>
            </div>
            <br/>

            <!-- Notifications content -->
            <form class="form-horizontal" method="POST" id="notificationsForm">
                <fieldset>
                    <div class="form-group">
                        <div class="checkbox">
                            <input type="checkbox" id="notifyUser" name="Notify">
                            <label for="notifyUser">Send me a notification when items I have requested have been added</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <div>
                            <button id="saveNotificationSettings" type="submit" class="btn btn-primary-outline">Save</button>
                        </div>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
</div>

<!-- Movie and TV Results template -->
<script id="search-template" type="text/x-handlebars-template">
    <div class="row">
        <div class="col-sm-2">

            {{#if_eq type "movie"}}
            {{#if posterPath}}
            <img class="img-responsive" src="http://image.tmdb.org/t/p/w150/{{posterPath}}" alt="poster">
            {{/if}}
            {{/if_eq}}
            {{#if_eq type "tv"}}
            {{#if posterPath}}
            <img class="img-responsive" width="150" src="{{posterPath}}" alt="poster">
            {{/if}}
            {{/if_eq}}

        </div>
        <div class="col-sm-5 ">
            <div>
                {{#if_eq type "movie"}}
                <a href="https://www.themoviedb.org/movie/{{id}}/" target="_blank">
                    <h4>{{title}} ({{year}})</h4>
                </a>
                {{else}}
                <a href="http://www.imdb.com/title/{{imdb}}/" target="_blank">
                    <h4>{{title}} ({{year}})</h4>
                </a>
                {{/if_eq}}
            </div>
            <p>{{overview}}</p>
        </div>
        <div class="col-sm-2 col-sm-push-3">
            <form method="POST" action="@url/search/request/{{type}}" id="form{{id}}">
                <input name="{{type}}Id" type="text" value="{{id}}" hidden="hidden" />
                {{#if_eq available true}}
                <button style="text-align: right" class="btn btn-success-outline disabled" disabled><i class="fa fa-check"></i> Available</button>
                {{else}}
                {{#if_eq requested true}}
                <button style="text-align: right" class="btn btn-primary-outline disabled" disabled><i class="fa fa-check"></i> Requested</button>
                {{else}}
                {{#if_eq type "movie"}}
                <button id="{{id}}" style="text-align: right" class="btn btn-primary-outline requestMovie" type="submit"><i class="fa fa-plus"></i> Request</button>
                {{/if_eq}}
                {{#if_eq type "tv"}}
                <div class="dropdown">
                    <button id="{{id}}" class="btn btn-primary-outline dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        <i class="fa fa-plus"></i> Request
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                        <li><a id="{{id}}" season-select="0" class="dropdownTv " href="#">All Seasons</a></li>
                        <li><a id="{{id}}" season-select="1" class="dropdownTv" href="#">First Season</a></li>
                        <li><a id="{{id}}" season-select="2" class="dropdownTv" href="#">Latest Season</a></li>
                    </ul>
                </div>
                {{/if_eq}}
                {{/if_eq}}
                {{/if_eq}}
                <br />
                <br />
                <br />
                {{#if voteAverage}}

                <small class="row">Vote Average: {{voteAverage}}</small>
                <small class="row">Vote Count: {{voteCount}}</small>
                {{/if}}
            </form>
        </div>

    </div>
    <hr />
</script>


<!-- Music Results template -->
<script id="music-template" type="text/x-handlebars-template">
    <div class="row">
        <div id="{{id}}imageDiv" class="col-sm-2">
            {{#if coverArtUrl}}
            <img id="{{id}}cover" class="img-responsive" src="{{coverArtUrl}}" width="150" alt="poster">
            {{/if}}
        </div>
        <div class="col-sm-5 ">
            <div>
                <a href="https://musicbrainz.org/release/{{id}}" target="_blank">
                    <h4>
                        {{artist}} - {{title}}
                        {{#if year}}
                        ({{year}})
                        {{/if}}
                    </h4>
                </a>

            </div>
            <p>{{overview}}</p>
        </div>
        <div class="col-sm-2 col-sm-push-3">
            <form method="POST" action="@url/search/request/{{type}}" id="form{{id}}">
                <input name="{{type}}Id" type="text" value="{{id}}" hidden="hidden" />
                {{#if_eq available true}}
                <button style="text-align: right" class="btn btn-success-outline disabled" disabled><i class="fa fa-check"></i> Available</button>
                {{else}}
                {{#if_eq requested true}}
                <button style="text-align: right" class="btn btn-success-outline disabled" disabled><i class="fa fa-check"></i> Requested</button>
                {{else}}
                <button id="{{id}}" style="text-align: right" class="btn btn-primary-outline requestAlbum" type="submit"><i class="fa fa-plus"></i> Request</button>
                {{/if_eq}}
                {{/if_eq}}
                <br />
                <small class="row">Track Count: {{trackCount}}</small>
                <small class="row">Country: {{country}}</small>
            </form>
        </div>

    </div>
    <hr />
</script>


@Html.LoadSearchAssets()