@using PlexRequests.UI.Helpers
@{
    var baseUrl = Html.GetBaseUrl();
    var formAction = string.Empty;
    if (!string.IsNullOrEmpty(baseUrl.ToHtmlString()))
    {
        formAction = "/" + baseUrl.ToHtmlString();
    }
}
<h1>Issues</h1>
<h4>Below you can see yours and all your current issues and their state.</h4>
<br />
<br />

<ul id="nav-tabs" class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#pendingTab" aria-controls="home" role="tab" data-toggle="tab">Pending <span id="pendingCount"></span></a></li>
    <li role="presentation"><a href="#resolvedTab" aria-controls="profile" role="tab" data-toggle="tab">Resolved <span id="resolvedCount"></span></a></li>
</ul>
<br/>

<div class="row">
    <div class="col-md-3">
        <h4>Title</h4>
    </div>
    <div class="col-md-2">
        <h4>Type</h4>
    </div>
    <div class="col-md-4">
        <h4>Issues</h4>
    </div>

    <div class="col-md-2">
        <h4>Requested</h4>
    </div>
    <div class="col-sm-1">
        
    </div>
</div>
<hr />
<div id="myTabContent" class="tab-content">
    <!-- Pending tab -->
    <div role="tabpanel" class="tab-pane active" id="pendingTab">
        <br />
        <br />
        <!-- Movie content -->
        <div id="pendingIssues">
            
        </div>
    </div>

    <!-- Resolved -->
    <div role="tabpanel" class="tab-pane" id="resolvedTab">

        <br />
        <br />
        <!-- resolved content -->
        <div id="resolvedIssues">
            
        </div>
    </div>
</div>

<script id="issue-template" type="text/x-handlebars-template">
    <div id="{{id}}Template">
        <div class="row">
            <div class="col-md-3">
                <div id="title">{{title}}</div>
            </div>
            <div class="col-md-2">
                <div id="type">{{type}}</div>
            </div>
            <div class="col-md-4">
                <small>{{issues}}</small>
            </div>

            <div class="col-md-2">
                {{#if requestId}}
                <div><i class="fa fa-check"></i></div>
                {{else}}
                <div><i class="fa fa-times"></i></div>
                {{/if}}
            </div>
            <div class="col-sm-1">
                <a href="" id="{{id}}link" class="btn btn-sm btn-info-outline approve"><i class="fa fa-info"></i> Details</a>
                <br />
                <form action="@formAction/issues/remove" method="post" id="delete{{id}}">
                    <input id="issueId" name="issueId" value="{{id}}" hidden="hidden" />
                    <button type="submit" id="{{id}}" class="btn btn-sm btn-danger-outline dropdown-toggle delete">Remove</button>
                </form>  
            </div>
        </div>
    </div>
    <hr />
</script>

@Html.LoadIssueAssets()