<%- include("./partials/headers") -%>

<div class="container">
    <div class="row">

        <div>
            <h1 class="sr-card-title">Search Result: </h1>
        </div>
        <% for(var i=0; i < apiResult.length; i++){ %>
        <% if(i % 4 === 0) {%>
        <div class="col-md-3">
            <!-- Col 1-->
            <article class="card mb-4">
                <form action="/searchResult" method="POST">
                    <!-- Check Image -->
                    <div class="searchResult-a">
                        <% if(!apiResult[i].volumeInfo.imageLinks) {%>
                        <img class="card-img" src="/img/other/nailed-note.png" alt=" img">
                        <% }else{ %>
                        <img class="card-img" src="<%= apiResult[i].volumeInfo.imageLinks.thumbnail %>" alt=" img">
                        <% } %>
                    </div>

                    <!-- Check Title -->
                    <h4 class="sr-card-title">
                        <% if(apiResult[i].volumeInfo.title) {%>
                        <span><%= apiResult[i].volumeInfo.title %></span>
                        <% }else{ %>
                        <span></span>
                        <% } %>
                    </h4>

                    <!-- Check Authors -->
                    <div id="author">&nbsp;<span class="by">by</span>
                        <% if(apiResult[i].volumeInfo.authors) {%>
                        <span class="author-yellow" href="#">&nbsp; <%= apiResult[i].volumeInfo.authors %> &nbsp;</span>
                        <% }else{ %>
                        <span></span>
                        <% } %>
                    </div>

                    <!-- Check Description -->
                    <div class="sr-card-body" data-value="description" id="desc">
                        <% if(apiResult[i].volumeInfo.description) {%>
                        <p id="imgg" class="card-text"><span class="sr-description">&nbsp; Description: </span> &nbsp;
                            <%= apiResult[i].volumeInfo.description.substring(0, 165) %> <span> &nbsp; ...</span></p>
                        <% }else{ %>
                        <p id="imgg" class="card-text"><span class="sr-description">&nbsp; Description: </span> &nbsp;
                            Description not available. <span> &nbsp;</span></p>
                        <% } %>
                    </div>

                    <!-- Check ISBN Type -->
                    <div class="sr-isbn">
                        <% if(apiResult[i].volumeInfo.industryIdentifiers) {%>
                        <span><%= apiResult[i].volumeInfo.industryIdentifiers[0].type %> : &nbsp;</span>
                        <% }else{ %>
                        <span>ISBN Unavailable</span>
                        <% } %> 

                        <!-- Check ISBN -->
                        <% if(apiResult[i].volumeInfo.industryIdentifiers) {%>
                        <span><%= apiResult[i].volumeInfo.industryIdentifiers[0].identifier %></span>
                        <% }else{ %>
                        <span>&nbsp;</span>
                        <% } %>
                    </div>

                    <div style="display: none">
                        <!-- Passing Title -->
                        <% if(apiResult[i].volumeInfo.title) {%>
                        <input name="apiTitle" value="<%= apiResult[i].volumeInfo.title %>">
                        <% } %>

                        <!-- Passing Authors -->
                        <% if(apiResult[i].volumeInfo.authors) {%>
                        <input name="apiAuthors" value="<%= apiResult[i].volumeInfo.authors %>">
                        <% } %>

                        <!-- Passing ImageLink -->
                        <% if(apiResult[i].volumeInfo.imageLinks) {%>
                        <input name="apiImageLink" value="<%= apiResult[i].volumeInfo.imageLinks.thumbnail %>">
                        <% }else{ %>
                        <input name="apiImageLink" value="/img/other/nailed-note.png">
                        <% } %>

                        <!-- Passing Description -->
                        <% if(apiResult[i].volumeInfo.description) {%>
                        <input name="apiDescription" value="<%= apiResult[i].volumeInfo.description %>">
                        <% } %>

                        <!-- Passing Type -->
                        <% if(apiResult[i].volumeInfo.industryIdentifiers) {%>
                        <input name="apiISBNType" value="<%= apiResult[i].volumeInfo.industryIdentifiers[0].type %>">
                        <% } %>

                        <!-- Passing ISBN -->
                        <% if(apiResult[i].volumeInfo.industryIdentifiers) {%>
                        <input name="apiISBN" value="<%= apiResult[i].volumeInfo.industryIdentifiers[0].identifier %>">
                        <% } %>

                        <!-- Passing category -->
                        <% if(apiResult[i].volumeInfo.categories) {%>
                        <input name="apiCategories" value="<%= apiResult[i].volumeInfo.categories %>">
                        <% } %>
                    </div>
                    <!-- <div style="display: none"><input name="apiObj" value="<%= apiResult %>"></div>
                    <div style="display: none"><input name="apiObj" value="<%= i %>"></div> -->

                    <button class="btn btn-primary sr-button">Write Review</button>
                </form>
            </article>
            <hr>
        </div>
        <% continue;  %>
        <% } %>

        <!--  Col 2-->
        <% if(i % 4 === 1) {%>
        <div class="col-md-3">

            <article class="card mb-4">
                <form action="/searchResult" method="POST">
                    <!-- Check Image -->
                    <div class="searchResult-a">
                        <% if(!apiResult[i].volumeInfo.imageLinks) {%>
                        <img class="card-img" src="/img/other/nailed-note.png" alt=" img">
                        <% }else{ %>
                        <img class="card-img" src="<%= apiResult[i].volumeInfo.imageLinks.thumbnail %>" alt=" img">
                        <% } %>
                    </div>

                    <!-- Check Title -->
                    <h4 class="sr-card-title">
                        <% if(apiResult[i].volumeInfo.title) {%>
                        <span><%= apiResult[i].volumeInfo.title %></span>
                        <% }else{ %>
                        <span></span>
                        <% } %>
                    </h4>

                    <!-- Check Authors -->
                    <div id="author">&nbsp;<span class="by">by</span>
                        <% if(apiResult[i].volumeInfo.authors) {%>
                        <span class="author-yellow" href="#">&nbsp;<%= apiResult[i].volumeInfo.authors %> &nbsp;</span>
                        <% }else{ %>
                        <span></span>
                        <% } %>
                    </div>

                    <!-- Check Description -->
                    <div class="sr-card-body" data-value="description" id="desc">
                        <% if(apiResult[i].volumeInfo.description) {%>
                        <p id="imgg" class="card-text"><span class="sr-description">&nbsp; Description: </span> &nbsp;
                            <%= apiResult[i].volumeInfo.description.substring(0, 165) %> <span> &nbsp; ...</span></p>
                        <% }else{ %>
                        <p id="imgg" class="card-text"><span class="sr-description">&nbsp; Description: </span> &nbsp;
                            Description not available. <span> &nbsp;</span></p>
                        <% } %>
                    </div>

                    <!-- Check ISBN Type -->
                    <div class="sr-isbn">
                        <% if(apiResult[i].volumeInfo.industryIdentifiers) {%>
                        <span><%= apiResult[i].volumeInfo.industryIdentifiers[0].type %>: &nbsp;</span>
                        <% }else{ %>
                        <span>ISBN Unavailable</span>
                        <% } %> 

                        <!-- Check ISBN -->
                        <% if(apiResult[i].volumeInfo.industryIdentifiers) {%>
                        <span><%= apiResult[i].volumeInfo.industryIdentifiers[0].identifier %></span>
                        <% }else{ %>
                        <span>&nbsp;</span>
                        <% } %>
                    </div>


                    <div style="display: none">
                        <!-- Passing Title -->
                        <% if(apiResult[i].volumeInfo.title) {%>
                        <input name="apiTitle" value="<%= apiResult[i].volumeInfo.title %>">
                        <% } %>

                        <!-- Passing Authors -->
                        <% if(apiResult[i].volumeInfo.authors) {%>
                        <input name="apiAuthors" value="<%= apiResult[i].volumeInfo.authors %>">
                        <% } %>

                        <!-- Passing ImageLink -->
                        <% if(apiResult[i].volumeInfo.imageLinks) {%>
                        <input name="apiImageLink" value="<%= apiResult[i].volumeInfo.imageLinks.thumbnail %>">
                        <% }else{ %>
                        <input name="apiImageLink" value="/img/other/nailed-note.png">
                        <% } %>

                        <!-- Passing Description -->
                        <% if(apiResult[i].volumeInfo.description) {%>
                        <input name="apiDescription" value="<%= apiResult[i].volumeInfo.description %>">
                        <% } %>

                        <!-- Passing Type -->
                        <% if(apiResult[i].volumeInfo.industryIdentifiers) {%>
                        <input name="apiISBNType" value="<%= apiResult[i].volumeInfo.industryIdentifiers[0].type %>">
                        <% } %>

                        <!-- Passing ISBN -->
                        <% if(apiResult[i].volumeInfo.industryIdentifiers) {%>
                        <input name="apiISBN" value="<%= apiResult[i].volumeInfo.industryIdentifiers[0].identifier %>">
                        <% } %>

                        <!-- Passing category -->
                        <% if(apiResult[i].volumeInfo.categories) {%>
                        <input name="apiCategories" value="<%= apiResult[i].volumeInfo.categories %>">
                        <% } %>
                    </div>

                    <button type="submit" class="btn btn-primary sr-button">Write Review</button>
                </form>
                <hr>
            </article>
        </div>
        <% continue;  %>
        <% } %>

        <!-- Col 3 -->
        <% if(i % 4 === 2) {%>
        <div class="col-md-3">

            <article class="card mb-4">
                <form action="/searchResult" method="POST">
                    <!-- Check Image -->
                    <div class="searchResult-a">
                        <% if(!apiResult[i].volumeInfo.imageLinks) {%>
                        <img class="card-img" src="/img/other/nailed-note.png" alt=" img">
                        <% }else{ %>
                        <img class="card-img" src="<%= apiResult[i].volumeInfo.imageLinks.thumbnail %>" alt=" img">
                        <% } %>
                    </div>

                    <!-- Check Title -->
                    <h4 class="sr-card-title">
                        <% if(apiResult[i].volumeInfo.title) {%>
                        <span><%= apiResult[i].volumeInfo.title %></span>
                        <% }else{ %>
                        <span></span>
                        <% } %>
                    </h4>

                    <!-- Check Authors -->
                    <div id="author">&nbsp;<span class="by">by</span>
                        <% if(apiResult[i].volumeInfo.authors) {%>
                        <span class="author-yellow" href="#">&nbsp;<%= apiResult[i].volumeInfo.authors %> &nbsp;</span>
                        <% }else{ %>
                        <span></span>
                        <% } %>
                    </div>


                    <!-- Check Description -->
                    <div class="sr-card-body" data-value="description" id="desc">
                        <% if(apiResult[i].volumeInfo.description) {%>
                        <p id="imgg" class="card-text"><span class="sr-description">&nbsp; Description: </span> &nbsp;
                            <%= apiResult[i].volumeInfo.description.substring(0, 165) %> <span> &nbsp; ...</span></p>
                        <% }else{ %>
                        <p id="imgg" class="card-text"><span class="sr-description">&nbsp; Description: </span> &nbsp;
                            Description not available. <span> &nbsp;</span></p>
                        <% } %>
                    </div>

                    <!-- Check ISBN Type -->
                    <div class="sr-isbn">
                        <% if(apiResult[i].volumeInfo.industryIdentifiers) {%>
                        <span><%= apiResult[i].volumeInfo.industryIdentifiers[0].type %> : &nbsp;</span>
                        <% }else{ %>
                        <span>ISBN Unavailable</span>
                        <% } %> 

                        <!-- Check ISBN -->
                        <% if(apiResult[i].volumeInfo.industryIdentifiers) {%>
                        <span><%= apiResult[i].volumeInfo.industryIdentifiers[0].identifier %></span>
                        <% }else{ %>
                        <span>&nbsp;</span>
                        <% } %>
                    </div>

                    <div style="display: none">
                        <!-- Passing Title -->
                        <% if(apiResult[i].volumeInfo.title) {%>
                        <input name="apiTitle" value="<%= apiResult[i].volumeInfo.title %>">
                        <% } %>

                        <!-- Passing Authors -->
                        <% if(apiResult[i].volumeInfo.authors) {%>
                        <input name="apiAuthors" value="<%= apiResult[i].volumeInfo.authors %>">
                        <% } %>

                        <!-- Passing ImageLink -->
                        <% if(apiResult[i].volumeInfo.imageLinks) {%>
                        <input name="apiImageLink" value="<%= apiResult[i].volumeInfo.imageLinks.thumbnail %>">
                        <% }else{ %>
                        <input name="apiImageLink" value="/img/other/nailed-note.png">
                        <% } %>

                        <!-- Passing Description -->
                        <% if(apiResult[i].volumeInfo.description) {%>
                        <input name="apiDescription" value="<%= apiResult[i].volumeInfo.description %>">
                        <% } %>

                        <!-- Passing Type -->
                        <% if(apiResult[i].volumeInfo.industryIdentifiers) {%>
                        <input name="apiISBNType" value="<%= apiResult[i].volumeInfo.industryIdentifiers[0].type %>">
                        <% } %>

                        <!-- Passing ISBN -->
                        <% if(apiResult[i].volumeInfo.industryIdentifiers) {%>
                        <input name="apiISBN" value="<%= apiResult[i].volumeInfo.industryIdentifiers[0].identifier %>">
                        <% } %>

                        <!-- Passing category -->
                        <% if(apiResult[i].volumeInfo.categories) {%>
                        <input name="apiCategories" value="<%= apiResult[i].volumeInfo.categories %>">
                        <% } %>
                    </div>


                    <button type="submit" class="btn btn-primary sr-button">Write Review</button>
                </form>
                <hr>
            </article>
        </div>
        <% continue; %>
        <% } %>

        <!-- Col 4 -->
        <% if(i % 4 === 3) {%>
        <div class="col-md-3">
            <article class="card mb-4">
                <form action="/searchResult" method="POST">
                    <!-- image -->
                    <div class="searchResult-a">
                        <% if(!apiResult[i].volumeInfo.imageLinks) {%>
                        <img class="card-img" src="/img/other/nailed-note.png" alt=" img">
                        <% }else{ %>
                        <img class="card-img" src="<%= apiResult[i].volumeInfo.imageLinks.thumbnail %>" alt=" img">
                        <% } %>
                    </div>

                    <!-- Check Title -->
                    <h4 class="sr-card-title">
                        <% if(apiResult[i].volumeInfo.title) {%>
                        <span><%= apiResult[i].volumeInfo.title %></span>
                        <% }else{ %>
                        <span></span>
                        <% } %>
                    </h4>

                    <!-- Check Authors -->
                    <div id="author">&nbsp;<span class="by">by</span>
                        <% if(apiResult[i].volumeInfo.authors) {%>
                        <span class="author-yellow" href="#">&nbsp;<%= apiResult[i].volumeInfo.authors %> &nbsp;</span>
                        <% }else{ %>
                        <span></span>
                        <% } %>
                    </div>

                    <!-- Check Description -->
                    <div class="sr-card-body" data-value="description" id="desc">
                        <% if(apiResult[i].volumeInfo.description) {%>
                        <p id="imgg" class="card-text"><span class="sr-description">&nbsp; Description: </span> &nbsp;
                            <%= apiResult[i].volumeInfo.description.substring(0, 165) %> <span> &nbsp; ... </span></p>
                        <% }else{ %>
                        <p id="imgg" class="card-text"><span class="sr-description">&nbsp; Description: </span> &nbsp;
                            Description not available. <span> &nbsp; </span></p>
                        <% } %>
                    </div>

                    <!-- Check ISBN Type -->
                    <div class="sr-isbn">
                        <% if(apiResult[i].volumeInfo.industryIdentifiers) {%>
                        <span><%= apiResult[i].volumeInfo.industryIdentifiers[0].type %> : &nbsp;</span>
                        <% }else{ %>
                        <span>ISBN Unavailable</span>
                        <% } %> 

                        <!-- Check ISBN -->
                        <% if(apiResult[i].volumeInfo.industryIdentifiers) {%>
                        <span><%= apiResult[i].volumeInfo.industryIdentifiers[0].identifier %></span>
                        <% }else{ %>
                        <span>&nbsp;</span>
                        <% } %>
                    </div>

                    <div style="display: none">
                        <!-- Passing Title -->
                        <% if(apiResult[i].volumeInfo.title) {%>
                        <input name="apiTitle" value="<%= apiResult[i].volumeInfo.title %>">
                        <% } %>

                        <!-- Passing Authors -->
                        <% if(apiResult[i].volumeInfo.authors) {%>
                        <input name="apiAuthors" value="<%= apiResult[i].volumeInfo.authors %>">
                        <% } %>

                        <!-- Passing ImageLink -->
                        <% if(apiResult[i].volumeInfo.imageLinks) {%>
                        <input name="apiImageLink" value="<%= apiResult[i].volumeInfo.imageLinks.thumbnail %>">
                        <% }else{ %>
                        <input name="apiImageLink" value="/img/other/nailed-note.png">
                        <% } %>

                        <!-- Passing Description -->
                        <% if(apiResult[i].volumeInfo.description) {%>
                        <input name="apiDescription" value="<%= apiResult[i].volumeInfo.description %>">
                        <% } %>

                        <!-- Passing Type -->
                        <% if(apiResult[i].volumeInfo.industryIdentifiers) {%>
                        <input name="apiISBNType" value="<%= apiResult[i].volumeInfo.industryIdentifiers[0].type %>">
                        <% } %>

                        <!-- Passing ISBN -->
                        <% if(apiResult[i].volumeInfo.industryIdentifiers) {%>
                        <input name="apiISBN" value="<%= apiResult[i].volumeInfo.industryIdentifiers[0].identifier %>">
                        <% } %>

                        <!-- Passing category -->
                        <% if(apiResult[i].volumeInfo.categories) {%>
                        <input name="apiCategories" value="<%= apiResult[i].volumeInfo.categories %>">
                        <% } %>
                    </div>

                    <button type="submit" class="btn btn-primary sr-button">Write Review</button>
                </form>
                <hr>
            </article>
        </div>
        <% continue; %>
        <% } %>
        <% } %>
    </div>

</div>

<%- include("./partials/footers") -%>