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

@import utils.JodaDateUtil._
@import utils.FileUtil._
@import utils.RouteUtil._

@preview(attachment: Attachment) = @{
    var previewFile = ""
    if(attachment.mimeType.startsWith("image/")){
        previewFile = "<img src='" + routes.AttachmentApp.getFile(attachment.id).toString + "'>";
    }
    Html(previewFile)
}

@link(attachment: Attachment) = @{
    val url = getUrl(attachment.containerType, attachment.containerId)
    if(url != null){
        Html("<a href='" + url + "' target='_blank'>" + url + "</a>")
    } else {
        ""
    }
}

@siteLayout(Messages("user.files"), SITE_HOME) {
    <link rel="stylesheet" type="text/css" media="all" href="@routes.Assets.at("stylesheets/filetype.css")">
    <div class="page-wrap-outer">
        <div class="page-wrap">
            @views.html.common.mySeriesMenuTab(TAB_MY_FILES)
            <form action="@routes.UserApp.userFiles()">
            <div class="user-file-search search search-bar">
                <input name="filter" class="textbox" type="text" placeholder="@Messages("search.title")" value="">
                <button type="submit" class="search-btn"><i class="yobicon-search"></i></button>
            </div>
            </form>
            <div class="attachment-files">
                <div class="attachment-files-header row">
                    <div class="span1 header-preview">Preview</div>
                    <div class="span5 header-file-name">Filename</div>
                    <div class="span1 header-size">Size</div>
                    <div class="span1">Download</div>
                    <div class="span2 file-date">Date</div>
                    <div class="span4 header-location">Location</div>
                </div>
                @for(attachment <- currentPage.getList){
                    <div class="attachment-file-detail row">
                        <div class="file-preview span1"><a href="@routes.AttachmentApp.getFile(attachment.id)" target="_blank">@preview(attachment)</a></div>
                        <div class="span5 file-name"><a href="@routes.AttachmentApp.getFile(attachment.id)" target="_blank"><i class="icon text-icon"></i>@attachment.name</a></div>
                        <div class="span1 file-size">@humanReadableByteCount(attachment.size, true)</div>
                        <div class="span1 file-download"><a href="@routes.AttachmentApp.getFile(attachment.id)?action=download"><button type="button" class="ybtn"><i class="yobicon-cloud-download"></i></button> </a></div>
                        <div class="span2 file-date">@getDateString(attachment.createdDate, "yyyy-MM-dd h:mm a")</div>
                        <div class="span4 file-location">@link(attachment)</div>
                    </div>
                }
            </div>
        </div>
        <!-- pagination.js will fill here. -->
        <div id="pagination"></div>
    </div>
    <script type="text/javascript" src="@routes.Assets.at("javascripts/lib/filetype.js")"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".attachment-file-detail").hover(
                    function() {
                        $(this).addClass('hover');
                    }, function () {
                        $(this).removeClass("hover");
                    }
            );
            $('.file-name').each(function(){
                var that = $(this);
                fileType.some(function(item){
                    if( item[0].test(that.text()) ) {
                        that.find('i').removeClass('text-icon').addClass(item[1] + " font-larger");
                        return true;
                    }
                });
            });

            $('.user-file-search > button').on('submit', function () {
                console.log('searche!');
            });

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