<div class="container">
    <div class="row" style="margin-top: 20px;">
        <div class="col s12">
            <a routerLink="/bookList" routerLinkActive="active"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Go back</a>
            <span> / </span>
            <a (click)="onSelect(book)" style="cursor: pointer">Edit</a>
        </div>
    </div>
    <md-grid-list cols="9" rowHeight="100px">
        <md-grid-tile [colspan]="3" [rowspan]="5">
            <div class="panel panel-default">
                <div class="panel-body">
                    <img [src]="'http://localhost:8181/image/book/'+book.id+'.png'" class="responsive-img" />
                </div>
            </div>
        </md-grid-tile>
        <md-grid-tile [colspan]="6">
            <h3>{{book.title}}</h3>
        </md-grid-tile>
        <md-grid-tile [colspan]="3" [rowspan]="3">
            <md-list>
                <md-list-item>
                    <p><strong>Author: </strong>{{book.author}}</p>
                </md-list-item>
                <md-list-item>
                    <p><strong>Publisher: </strong>{{book.publisher}}</p>
                </md-list-item>
                <md-list-item>
                    <p><strong>Publication Date: </strong>{{book.publicationDate}}</p>
                </md-list-item>
                <md-list-item>
                    <p><strong>Language: </strong>{{book.language}}</p>
                </md-list-item>
                <md-list-item>
                    <p><strong>Category: </strong>{{book.category}}</p>
                </md-list-item>
                <md-list-item>
                    <p><strong>Pages: </strong>{{book.numberOfPages}}</p>
                </md-list-item>
            </md-list>
        </md-grid-tile>
        <md-grid-tile [colspan]="3" [rowspan]="3">
            <md-list>
                <md-list-item>
                    <p><strong>Format: </strong>{{book.format}}</p>
                </md-list-item>
                <md-list-item>
                    <p><strong>ISBN: </strong>{{book.isbn}}</p>
                </md-list-item>
                <md-list-item>
                    <p><strong>Shipping Weight: </strong>{{book.shippingWeight}}</p>
                </md-list-item>
                <md-list-item>
                    <p><strong>List Price: </strong>{{book.listPrice}}</p>
                </md-list-item>
                <md-list-item>
                    <p><strong>Our Price: </strong>{{book.ourPrice}}</p>
                </md-list-item>
                <md-list-item>
                    <p><strong>Number in Stock: </strong>{{book.inStockNumber}}</p>
                </md-list-item>
            </md-list>
        </md-grid-tile>
        <md-grid-tile [colspan]="6">
            <p><strong>Description: </strong>{{book.description}}</p>
        </md-grid-tile>
    </md-grid-list>
    <!-- <div class="row">
    <div class="col s3">
    </div>
    <div class="col s8 offset-s1">
        <h3>{{book.title}}</h3>
        <div class="row">
            <div class="col s6">
                <p><strong>Author: </strong>{{book.author}}</p>
                <p><strong>Publisher: </strong>{{book.publisher}}</p>
                <p><strong>Publication Date: </strong>{{book.publicationDate}}</p>
                <p><strong>Language: </strong>{{book.language}}</p>
                <p><strong>Category: </strong>{{book.category}}</p>
                <p><strong>Pages: </strong>{{book.numberOfPages}}</p>
            </div>
            <div class="col s6">
                <p><strong>Format: </strong>{{book.format}}</p>
                <p><strong>ISBN: </strong>{{book.isbn}}</p>
                <p><strong>Shipping Weight: </strong>{{book.shippingWeight}}</p>
                <p><strong>List Price: </strong>{{book.listPrice}}</p>
                <p><strong>Our Price: </strong>{{book.ourPrice}}</p>
                <p><strong>Number in Stock: </strong>{{book.inStockNumber}}</p>
            </div>
        </div>
        <p><strong>Description: </strong>{{book.description}}</p>
    </div>
</div>
 -->
</div>
