Ombi/PlexRequests.UI/Views/Requests/Index.cshtml

@using Nancy.Security
<div>
    <h1>Requests</h1>
    <h4>Below you can see yours and all other requests, as well as their download and approval status.</h4>
    @if (Context.CurrentUser.IsAuthenticated())
    {
        <button id="approveAll" class="btn btn-success-outline" type="submit"><i class="fa fa-plus"></i> Approve All</button>
        <br />
        <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">Movies</a></li>
        }
        @if (Model.SearchForTvShows)
        {
            <li role="presentation"><a href="#TvShowTab" aria-controls="profile" role="tab" data-toggle="tab">TV Shows</a></li>
        }

    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        @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>
        }
    </div>

</div>


<script id="search-template" type="text/x-handlebars-template">
    <div id="{{requestId}}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>
                    <a href="https://www.themoviedb.org/{{type}}/{{id}}">
                        <h4 class="request-title">{{title}} ({{year}})</h4>
                    </a>
                    <span class="label label-success">{{status}}</span>
                </div>
                <br />
                <div>Release Date: {{releaseDate}}</div>
                <div>
                    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>
                    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>
                <div>Requested By: {{requestedBy}}</div>
                <div>Requested Date: {{requestedDate}}</div>
                <div id="issueArea">
                    {{#if otherMessage}}
                    <div>Message: {{otherMessage}}</div>
                    {{else}}
                    <div>Issue: {{issues}}</div>
                    {{/if}}
                </div>
                <div id="adminNotesArea{{requestId}}">
                    {{#if adminNote}}
                    <div>Note from Admin: {{adminNote}}</div>
                    {{/if}}
                </div>
            </div>
            <div class="col-sm-2 col-sm-push-3">
                {{#if_eq admin true}}
                {{#if_eq approved false}}
                <form method="POST" action="/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> Approve</button>
                </form>
                {{/if_eq}}
                <form method="POST" action="/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-plus"></i> Remove</button>
                </form>

                <form method="POST" action="/requests/clearissues" id="clear{{requestId}}">
                    <input name="Id" type="text" value="{{requestId}}" hidden="hidden" />
                    <button id="{{requestId}}" style="text-align: right" class="btn btn-sm btn-info-outline clear" type="submit"><i class="fa fa-check"></i> Clear Issues</button>
                </form>

                <form method="POST" action="/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">Mark Unavailable</button>
                    {{else}}
                    <button id="{{requestId}}" custom-availibility="{{requestId}}" style="text-align: right" value="true" class="btn btn-sm btn-success-outline change" type="submit">Mark Available</button>
                    {{/if_eq}}
                </form>

                {{/if_eq}}

                <form method="POST" action="/requests/reportissue/" 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> Report Issue
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                            <li><a id="{{requestId}}" issue-select="0" class="dropdownIssue" href="#">Wrong Audio</a></li>
                            <li><a id="{{requestId}}" issue-select="1" class="dropdownIssue" href="#">No Subtitles</a></li>
                            <li><a id="{{requestId}}" issue-select="2" class="dropdownIssue" href="#">Wrong Content</a></li>
                            <li><a id="{{requestId}}" issue-select="3" class="dropdownIssue" href="#">Playback Issues</a></li>
                            <li><a id="{{requestId}}" issue-select="4" class="dropdownIssue" data-identifier="{{requestId}}" href="#" data-toggle="modal" data-target="#myModal">Other</a></li>
                            {{#if_eq admin true}}
                            <li><a id="{{requestId}}" issue-select="4" class="note" data-identifier="{{requestId}}" href="#" data-toggle="modal" data-target="#noteModal">Add Note</a></li>

                            {{/if_eq}}
                        </ul>
                    </div>
                </form>

            </div>
            @* // TODO add Issues to the view *@
        </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">Add issue/comment</h4>
            </div>
            <form method="POST" action="/requests/reportissuecomment" id="commentForm">
                <div class="modal-body">
                    <input name="requestId" class="requestId" 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">Close</button>
                    <button type="button" class="btn btn-primary-outline theSaveButton" data-dismiss="modal">Save changes</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="noteModal">
    <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">Add a note</h4>
            </div>
            <form method="POST" action="/requests/addnote" id="noteForm">
                <div class="modal-body">
                    <input name="requestId" class="noteId" type="text" hidden="hidden" value="" />
                    <textarea class="form-control form-control-custom" rows="3" id="noteArea" name="noteArea"></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger-outline" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary-outline theNoteSaveButton" data-dismiss="modal">Save changes</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="/Content/requests.js" type="text/javascript"></script>