@using Nancy.Security
@using PlexRequests.UI.Helpers
@using PlexRequests.UI.Resources
@{
    var baseUrl = Html.GetBaseUrl();
    var formAction = string.Empty;
    if (!string.IsNullOrEmpty(baseUrl.ToHtmlString()))
    {
        formAction = "/" + baseUrl.ToHtmlString();
    }
}
<div>
    <h1>@UI.Requests_Title</h1>
    <h4>@UI.Requests_Paragraph</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> @UI.Requests_MoviesTabTitle</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>@UI.Requests_TvShowTabTitle</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> @UI.Requests_AlbumsTabTitle</a></li>
        }
    </ul>
    <br />

    <!-- Tab panes -->
    <div class="tab-content contentList">
        <div class="row">
            <div class="col-sm-12">
                <div class="pull-right">
                    <div class="btn-group btn-group-separated">
                        @if (Context.CurrentUser.IsAuthenticated()) //TODO replace with IsAdmin
                        {
                            @if (Model.SearchForMovies)
                            {
                                <button id="deleteMovies" class="btn btn-warning-outline delete-category" type="submit"><i class="fa fa-trash"></i> @UI.Requests_DeleteMovies</button>
                                <button id="approveMovies" class="btn btn-success-outline approve-category" type="submit"><i class="fa fa-plus"></i> @UI.Requests_ApproveMovies</button>
                            }
                            @if (Model.SearchForTvShows)
                            {
                                <button id="deleteTVShows" class="btn btn-warning-outline delete-category" type="submit" style="display: none;"><i class="fa fa-trash"></i> @UI.Requests_DeleteTVShows</button>
                                <button id="approveTVShows" class="btn btn-success-outline approve-category" type="submit" style="display: none;"><i class="fa fa-plus"></i> @UI.Requests_ApproveTvShows</button>
                            }
                            @if (Model.SearchForMusic)
                            {
                                <button id="deleteMusic" class="btn btn-warning-outline delete-category" type="submit" style="display: none;"><i class="fa fa-trash"></i> @UI.Requests_DeleteMusic</button>
                                <button id="approveMusic" class="btn btn-success-outline approve-category" type="submit" style="display: none;"><i class="fa fa-plus"></i> @UI.Requests_ApproveMusic</button>
                            }
                        }
                    </div>
                    <div class="btn-group">
                        <a href="#" class="btn btn-primary-outline dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                            @UI.Requests_Filter
                            <i class="fa fa-filter"></i>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#" class="filter" data-filter="all"><i class="fa fa-check-square"></i>  @UI.Requests_Filter_All</a></li>
                            <li><a href="#" class="filter" data-filter=".approved-true"><i class="fa fa-square-o"></i>  @UI.Requests_Filter_Approved</a></li>
                            <li><a href="#" class="filter" data-filter=".approved-false"><i class="fa fa-square-o"></i>  @UI.Requests_Filter_NotApproved</a></li>
                            <li><a href="#" class="filter" data-filter=".available-true"><i class="fa fa-square-o"></i>  @UI.Requests_Filter_Available</a></li>
                            <li><a href="#" class="filter" data-filter=".available-false"><i class="fa fa-square-o"></i> @UI.Requests_Filter_NotAvailable</a></li>
                            <li><a href="#" class="filter" data-filter=".released-true"><i class="fa fa-square-o"></i>  @UI.Requests_Filter_Released</a></li>
                            <li><a href="#" class="filter" data-filter=".released-false"><i class="fa fa-square-o"></i>  @UI.Requests_Filter_NotReleased</a></li>
                        </ul>
                    </div>
                    <div class="btn-group">
                        <a href="#" class="btn btn-primary-outline dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                            @UI.Requests_Order
                            <i class="fa fa-sort"></i>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#" class="sort" data-sort="requestorder:desc"><i class="fa fa-check-square"></i>  @UI.Requests_Order_LatestRequests</a></li>
                            <li><a href="#" class="sort" data-sort="requestorder:asc"><i class="fa fa-square-o"></i>  @UI.Requests_Order_OldestRequests</a></li>
                            <li><a href="#" class="sort" data-sort="releaseorder:desc"><i class="fa fa-square-o"></i>  @UI.Requests_Order_LatestReleases</a></li>
                            <li><a href="#" class="sort" data-sort="releaseorder:asc"><i class="fa fa-square-o"></i>  @UI.Requests_Order_OldestReleases</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        @if (Model.SearchForMovies)
            {

            <!-- Movie tab -->
            <div role="tabpanel" class="tab-pane active" id="MoviesTab">

                <br />
                <br />
                <!-- Movie content -->
                <div id="movieList">
                </div>
            </div>
        }

        @if (Model.SearchForTvShows)
            {
            <!-- TV tab -->
            <div role="tabpanel" class="tab-pane" id="TvShowTab">

                <br />
                <br />
                <!-- TV content -->
                <div id="tvList">
                </div>
            </div>
        }

        @if (Model.SearchForMusic)
            {
            <!-- Music tab -->
            <div role="tabpanel" class="tab-pane" id="MusicTab">

                <br />
                <br />
                <!-- TV content -->
                <div id="musicList">
                </div>
            </div>
        }
    </div>

</div>


<script id="search-template" type="text/x-handlebars-template">
    <div hidden="hidden">
        @*http://iamceege.github.io/tooltipster/#methods*@
        {{#if episodes}}
        <div id="{{requestId}}toolTipContent">
            {{#each episodes}}
            Season: {{this.seasonNumber}}
            <br />
            Episodes Requested:
            {{#each this.episodes}}
            {{this}}
            {{/each}}
            <hr />
            {{/each}}
        </div>
        {{/if}}
    </div>

    <div id="{{requestId}}Template" class="mix available-{{available}} approved-{{approved}} released-{{released}}" data-requestorder="{{requestedDateTicks}}" data-releaseorder="{{releaseDateTicks}}">
        <div class="row">
            <div class="col-sm-2">
                {{#if_eq type "movie"}}
                {{#if posterPath}}
                <img class="img-responsive" src="https://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>
                    <a href="http://www.imdb.com/title/{{imdb}}/" target="_blank">
                        <h4 class="request-title">{{title}} ({{year}})</h4>
                    </a>
                    <span class="label label-success">{{status}}</span>
                </div>
                <br />
                <div>@UI.Requests_ReleaseDate: {{releaseDate}}</div>
                <div>
                    @UI.Common_Approved:
                    {{#if_eq approved false}}
                    <i id="{{requestId}}notapproved" class="fa fa-times"></i>
                    {{/if_eq}}
                    {{#if_eq approved true}}
                    <i class="fa fa-check"></i>
                    {{/if_eq}}
                </div>
                <div>
                    @UI.Requests_Available
                    {{#if_eq available false}}
                    <i id="availableIcon{{requestId}}" class="fa fa-times"></i>
                    {{/if_eq}}
                    {{#if_eq available true}}
                    <i id="availableIcon{{requestId}}" class="fa fa-check"></i>
                    {{/if_eq}}
                </div>
                {{#if_eq type "tv"}}
                {{#if episodes}}
                Episodes: <span class="customTooltip" data-tooltip-content="#{{requestId}}toolTipContent"><i class="fa fa-info-circle"></i></span>
                {{else}}
                <div>@UI.Requests_SeasonsRequested: {{seriesRequested}}</div>
                {{/if}}
                {{/if_eq}}
                {{#if requestedUsers}}
                <div>@UI.Requests_RequestedBy: {{requestedUsers}}</div>
                {{/if}}
                <div>@UI.Requests_RequestedDate: {{requestedDate}}</div>
                <div>
                    @UI.Issues_Issue:
                    {{#if_eq issueId 0}}
                    <i class="fa fa-times"></i>
                    {{else}}
                    <a href="@formAction/issues/{{issueId}}"><i class="fa fa-check"></i></a>
                    {{/if_eq}}
                </div>
            </div>
            <div class="col-sm-3 col-sm-push-3">
                {{#if_eq admin true}}
                {{#if_eq approved false}}
                <form method="POST" action="@formAction/approval/approve" id="approve{{requestId}}">
                    <input name="requestId" type="text" value="{{requestId}}" hidden="hidden" />
                    {{#if_eq hasQualities true}}
                    <div class="btn-group btn-split">
                        <button type="button" class="btn btn-sm btn-success-outline approve" id="{{requestId}}" custom-button="{{requestId}}"><i class="fa fa-plus"></i> @UI.Common_Approve</button>
                        <button type="button" class="btn btn-success-outline dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span class="caret"></span>
                            <span class="sr-only">@UI.Requests_ToggleDropdown</span>
                        </button>
                        <ul class="dropdown-menu">
                            {{#each qualities}}
                            <li><a href="#" class="approve-with-quality" id="{{id}}">{{name}}</a></li>
                            {{/each}}
                        </ul>
                    </div>
                    {{else}}
                    <button id="{{requestId}}" custom-button="{{requestId}}" style="text-align: right" class="btn btn-sm btn-success-outline approve" type="submit"><i class="fa fa-plus"></i> @UI.Common_Approve</button>
                    {{/if_eq}}
                </form>
                {{/if_eq}}
                <form method="POST" action="@formAction/requests/delete" id="delete{{requestId}}">
                    <input name="Id" type="text" value="{{requestId}}" hidden="hidden" />
                    <button id="{{requestId}}" style="text-align: right" class="btn btn-sm btn-danger-outline delete" type="submit"><i class="fa fa-minus"></i> @UI.Common_Remove</button>
                </form>

                <form method="POST" action="@formAction/requests/changeavailability" id="change{{requestId}}">
                    <input name="Id" type="text" value="{{requestId}}" hidden="hidden" />
                    {{#if_eq available true}}
                    <button id="{{requestId}}" custom-availibility="{{requestId}}" style="text-align: right" value="false" class="btn btn-sm btn-info-outline change" type="submit"><i class="fa fa-minus"></i> @UI.Requests_MarkUnavailable</button>
                    {{else}}
                    <button id="{{requestId}}" custom-availibility="{{requestId}}" style="text-align: right" value="true" class="btn btn-sm btn-success-outline change" type="submit"><i class="fa fa-plus"></i> @UI.Requests_MarkAvailable</button>
                    {{/if_eq}}
                </form>

                {{/if_eq}}

                <form method="POST" action="@formAction/issues/issue/" id="report{{requestId}}">
                    <input name="requestId" type="text" value="{{requestId}}" hidden="hidden" />
                    <div class="dropdown">
                        <button id="{{requestId}}" class="btn btn-sm btn-primary-outline dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                            <i class="fa fa-plus"></i> @UI.Search_ReportIssue
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                            <li><a id="{{requestId}}" issue-select="0" class="dropdownIssue" href="#">@UI.Issues_WrongAudio</a></li>
                            <li><a id="{{requestId}}" issue-select="1" class="dropdownIssue" href="#">@UI.Issues_NoSubs</a></li>
                            <li><a id="{{requestId}}" issue-select="2" class="dropdownIssue" href="#">@UI.Issues_WrongContent</a></li>
                            <li><a id="{{requestId}}" issue-select="3" class="dropdownIssue" href="#">@UI.Issues_Playback</a></li>
                            <li><a id="{{requestId}}" issue-select="4" class="dropdownIssue" data-identifier="{{requestId}}" href="#" data-toggle="modal" data-target="#myModal">@UI.Issues_Other</a></li>
                        </ul>
                    </div>
                </form>

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




</script>

<script id="album-template" type="text/x-handlebars-template">
    <div id="{{requestId}}Template" class="mix available-{{available}} approved-{{approved}}" data-requestorder="{{requestedDateTicks}}" data-releaseorder="{{releaseDateTicks}}">
        <div class="row">
            <div class="col-sm-2">
                {{#if posterPath}}
                <img class="img-responsive" src="{{posterPath}}" width="150" alt="poster">
                {{/if}}
            </div>
            <div class="col-sm-5 ">
                <div>
                    <a href="https://musicbrainz.org/release/{{musicBrainzId}}" target="_blank">
                        <h4>
                            {{artist}} - {{title}}
                            {{#if year}}
                            ({{year}})
                            {{/if}}
                        </h4>
                    </a>
                    <span class="label label-success">{{status}}</span>
                </div>
                <br />
                <div>@UI.Requests_ReleaseDate {{releaseDate}}</div>
                <div>
                    @UI.Common_Approved:
                    {{#if_eq approved false}}
                    <i id="{{requestId}}notapproved" class="fa fa-times"></i>
                    {{/if_eq}}
                    {{#if_eq approved true}}
                    <i class="fa fa-check"></i>
                    {{/if_eq}}
                </div>
                <div>
                    @UI.Requests_Available
                    {{#if_eq available false}}
                    <i id="availableIcon{{requestId}}" class="fa fa-times"></i>
                    {{/if_eq}}
                    {{#if_eq available true}}
                    <i id="availableIcon{{requestId}}" class="fa fa-check"></i>
                    {{/if_eq}}
                </div>
                {{#if requestedUsers}}
                <div>@UI.Requests_RequestedBy: {{requestedUsers}}</div>
                {{/if}}
                <div>@UI.Requests_RequestedDate: {{requestedDate}}</div>
            </div>
            <div class="col-sm-2 col-sm-push-3">
                {{#if_eq admin true}}
                {{#if_eq approved false}}
                <form method="POST" action="@formAction/approval/approve" id="approve{{requestId}}">
                    <input name="requestId" type="text" value="{{requestId}}" hidden="hidden" />
                    <button id="{{requestId}}" custom-button="{{requestId}}" style="text-align: right" class="btn btn-sm btn-success-outline approve" type="submit"><i class="fa fa-plus"></i> @UI.Common_Approve</button>
                </form>
                {{/if_eq}}
                <form method="POST" action="@formAction/requests/delete" id="delete{{requestId}}">
                    <input name="Id" type="text" value="{{requestId}}" hidden="hidden" />
                    <button id="{{requestId}}" style="text-align: right" class="btn btn-sm btn-danger-outline delete" type="submit"><i class="fa fa-minus"></i> @UI.Common_Remove</button>
                </form>

                <form method="POST" action="@formAction/requests/changeavailability" id="change{{requestId}}">
                    <input name="Id" type="text" value="{{requestId}}" hidden="hidden" />
                    {{#if_eq available true}}
                    <button id="{{requestId}}" custom-availibility="{{requestId}}" style="text-align: right" value="false" class="btn btn-sm btn-info-outline change" type="submit"><i class="fa fa-minus"></i> @UI.Requests_MarkUnavailable</button>
                    {{else}}
                    <button id="{{requestId}}" custom-availibility="{{requestId}}" style="text-align: right" value="true" class="btn btn-sm btn-success-outline change" type="submit"><i class="fa fa-plus"></i> @UI.Requests_MarkAvailable</button>
                    {{/if_eq}}
                </form>

                {{/if_eq}}

                <form method="POST" action="@formAction/issues/issue/" id="report{{requestId}}">
                    <input name="requestId" type="text" value="{{requestId}}" hidden="hidden" />
                    <div class="dropdown">
                        <button id="{{requestId}}" class="btn btn-sm btn-primary-outline dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                            <i class="fa fa-plus"></i> @UI.Search_ReportIssue
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                            <li><a id="{{requestId}}" issue-select="0" class="dropdownIssue" href="#">@UI.Issues_WrongAudio</a></li>
                            <li><a id="{{requestId}}" issue-select="1" class="dropdownIssue" href="#">@UI.Issues_NoSubs</a></li>
                            <li><a id="{{requestId}}" issue-select="2" class="dropdownIssue" href="#">@UI.Issues_WrongContent</a></li>
                            <li><a id="{{requestId}}" issue-select="3" class="dropdownIssue" href="#">@UI.Issues_Playback</a></li>
                            <li><a id="{{requestId}}" issue-select="4" class="dropdownIssue" data-identifier="{{requestId}}" href="#" data-toggle="modal" data-target="#myModal">@UI.Issues_Other</a></li>
                        </ul>
                    </div>
                </form>

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

<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times"></i></button>
                <h4 class="modal-title">@UI.Issues_Modal_Title</h4>
            </div>
            <form method="POST" action="@formAction/issues/issuecomment" id="commentForm">
                <div class="modal-body">
                    <input name="providerId" class="providerId" type="text" hidden="hidden" value="" />
                    <textarea class="form-control form-control-custom" rows="3" id="commentArea" name="commentArea"></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger-outline" data-dismiss="modal">@UI.Common_Close</button>
                    <button type="button" class="btn btn-primary-outline theSaveButton" data-dismiss="modal">@UI.Common_Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

@Html.LoadRequestAssets()