list.scala.html

@(currentPage: Page[(Computer, Option[Company])], currentOrderBy: Int, currentFilter: String)(implicit flash: play.api.mvc.Flash)

@****************************************
* Helper generating navigation links    *
****************************************@
@link(newPage: Int, newOrderBy: Option[Int] = None) = @{
    routes.Application.list(newPage, newOrderBy.map { orderBy =>
        if(orderBy == scala.math.abs(currentOrderBy)) -currentOrderBy else orderBy
    }.getOrElse(currentOrderBy), currentFilter)
    
}

@**********************************
* Helper generating table headers *
***********************************@
@header(orderBy: Int, title: String) = {
    <th class="col@orderBy header @if(scala.math.abs(currentOrderBy) == orderBy) @{if(currentOrderBy < 0) "headerSortDown" else "headerSortUp"}">
        <a href="@link(0, Some(orderBy))">@title</a>
    </th>
}

@main {
    
    <h1>@Messages("computers.list.title", currentPage.total)</h1>

    @flash.get("success").map { message =>
        <div class="alert-message warning">
            <strong>Done!</strong> @message
        </div>
    }

    <div id="actions">
        
        @helper.form(action=routes.Application.list()) {
            <input type="search" id="searchbox" name="f" value="@currentFilter" placeholder="Filter by computer name...">
            <input type="submit" id="searchsubmit" value="Filter by name" class="btn primary">
        }
        
        <a class="btn success" id="add" href="@routes.Application.create()">Add a new computer</a>
        
    </div>
    
    @Option(currentPage.items).filterNot(_.isEmpty).map { computers =>
        
        <table class="computers zebra-striped">
            <thead>
                <tr>
                    @header(2, "Computer name")
                    @header(3, "Introduced")
                    @header(4, "Discontinued")
                    @header(5, "Company")
                </tr>
            </thead>
            <tbody>

                @computers.map { 
                    case (computer, company) => {
                        <tr>
                          <td><a href="@routes.Application.edit(computer.id)">@computer.name</a></td> 
                            <td>
                                @computer.introduced.map(_.format("dd MMM yyyy")).getOrElse { <em>-</em> }
                            </td>
                            <td>
                                @computer.discontinued.map(_.format("dd MMM yyyy")).getOrElse { <em>-</em> }
                            </td>
                            <td>
                              @company match {

                                case Some(c) => {
                                  @c.name
                                }

                                case None => {
                                  <em>-</em>
                                }

                              }
                            </td>
                        </tr>
                    }
                }

            </tbody>
        </table>

        <div id="pagination" class="pagination">
            <ul>
                @currentPage.prev.map { page =>
                    <li class="prev">
                        <a href="@link(page)">&larr; Previous</a>
                    </li> 
                }.getOrElse {
                    <li class="prev disabled">
                        <a>&larr; Previous</a>
                    </li>
                }
                <li class="current">
                    <a>Displaying @(currentPage.offset + 1) to @(currentPage.offset + computers.size) of @currentPage.total</a>
                </li>
                @currentPage.next.map { page =>
                    <li class="next">
                        <a href="@link(page)">Next &rarr;</a>
                    </li> 
                }.getOrElse {
                    <li class="next disabled">
                        <a>Next &rarr;</a>
                    </li>
                }
            </ul>
        </div>
        
    }.getOrElse {
        
        <div class="well">
            <em>Nothing to display</em>
        </div>
        
    }

        
}