@**
* Yona, 21st Century Project Hosting SW
*
* Copyright Yona & Yobi Authors & NAVER Corp.
* https://yona.io
**@
@(message: String, currentPage: com.avaje.ebean.Page[Project], filter:String)

@import utils.TemplateHelper._
@import utils.JodaDateUtil._

@siteMngLayout(message) {
    <div class="title_area">
        <h2 class="pull-left">@Messages("site.sidebar.projectList")</h2>
        <form class="form-search pull-right" action="@routes.SiteApp.projectList()">
            <div class="search-bar">
                <input type="text" class="textbox" name="filter" placeholder="@Messages("site.project.filter")" value="@filter">
                <button type="submit" class="search-btn"><i class="yobicon-search"></i></button>
            </div>
        </form>
    </div>
    <div class="row-fluid listhead">
        <div class="span5 listhead-title">
            <strong>@Messages("project.name")</strong>
        </div>
        <div class="span4 listhead-title">
            <strong>@Messages("project.description")</strong>
        </div>
        <div class="span2 listhead-title">
            <strong>@Messages("project.created")</strong>
        </div>
        <div class="span1 listhead-title">
            <strong>&nbsp;</strong>
        </div>
    </div>
    <ul class="project-list-wrap">
        @for(project <- currentPage.getList) {
        <li class="row-fluid listitem">
            <div class="span5 listitem-col">
                <a href="@routes.ProjectApp.project(project.owner,project.name)" class="avatar-wrap list-avatar">
                    <img src="@urlToProjectLogo(project)" alt="@project.name"/> @project.owner/@project.name
                </a>
                <a href="@routes.ProjectApp.project(project.owner,project.name)" class="project-name">
                    @project.owner/@project.name
                </a>
            </div>
            <div class="span4 listitem-col">
              @project.overview
            </div>
            <div class="span2 listitem-col">
            @geYMDDate(project.createdDate)
            </div>
            <div class="span1 listitem-col">
                <button class="ybtn ybtn-danger" data-project-name="@project.owner/@project.name" data-toggle="delete-project" data-href="@routes.SiteApp.deleteProject(project.id)">@Messages("button.delete")</button>
            </div>
        </li>
        }
    </ul>

    <div id="pagination"></div>

    @** Confirm to delete project **@
    <div id="alertDeletionWrap" class="modal fade">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <span id="project-name"></span>@Messages("site.project.delete")
        </div>
        <div class="modal-body">
            <p>@Messages("site.project.deleteConfirm")</p>
        </div>
        <div class="modal-footer">
            <button type="button" id="projectDeleteBtn" class="ybtn ybtn-danger" >@Messages("button.yes")</button>
            <button type="button" class="ybtn" data-dismiss="modal">@Messages("button.no")</button>
        </div>
    </div>
    @** // **@

    <script type="text/javascript">
    $(function(){
        $('.project-list-wrap').on('click','[data-toggle="delete-project"]',function(){
            $('#projectDeleteBtn')
              .data('requestUri',$(this).data('href'))
              .data("requestMethod","delete")
              .requestAs();

            $('#project-name').html($(this).data('projectName'));

            $('#alertDeletionWrap').modal('show');

            console.log($(this).data('href'));
        });

        yobi.Pagination.update($("#pagination"), @currentPage.getTotalPageCount);
    });
    </script>
}