<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>

<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/general/devices.css">
<script type="text/javascript ">
    $(document).ready(function(){

    })
</script>
<style type="text/css" >
    .eachDevice{
        width: 280px;
        float: left;
        margin-left: 10px;
    }
    .navigator{
        width: 850px;
        margin-top: 200px;
    }

    .navigator-control{
       margin-left: 250px;
    }

    .labelVersion{
        width: 300px;
    }
</style>
<s:if test="%{isResultEmpty()}">
    <div style="width: 300px;margin-left: 450px;margin-top: -55px;" >
    <div class="labelVersion">Version</div>
    <select class="version">
        <option value=0>--Select Version--</option>
        <s:iterator value="versions" var="version">
             <option value="<s:property value="#version" />"><s:property value="#version" /></option>
        </s:iterator>
    </select>
    </div>
   <br/>
<s:if test="%{!isListEmpty(deviceList)}">
<input type="checkbox" name="allDevices"><span style="color: #5f9ea0;">All devices</span>
    <br/>
 <div id="allDeviceList">
<s:iterator value="deviceList" var="device">
  <div class="eachDevice">
      <input type="checkbox">
        <s:property value="#device.serialNumber" />
        <input type="hidden" value="<s:property value="#device.serialNumber" />" name="eachDevice"/>
  </div>
</s:iterator>
    </div>
              <s:if test="%{countAllDevices>12}">

                <input type="hidden" name="networkId" value="<s:property value='networkId'/>"  />
                <div class="navigator">
                <span class="page-info">
                    page &nbsp;
                    <s:property value="page"/>
                    &nbsp;/&nbsp;
                    <s:property value="maxPage"/>
                </span>
                <div class="navigator-control">
                    <div style="float:left;width: 300px;">
                        <div class="left-arrows">
                            <s:if test="%{hasPrevious()}">
                               <a href="#" class="viewNextModelDevices"  >

                                    <img src="<%=request.getContextPath()%>/images/paging/first.gif" alt="first">
                                    <input type="hidden" name="page" value="1"/>
                                </a>
                                &nbsp;
                                <a href="#" class="viewNextModelDevices">
                                    <img src="<%=request.getContextPath()%>/images/paging/prev.gif" alt="first">
                                    <input type="hidden" name="page" value="<s:property value="%{page - 1}"/>"  />
                                </a>
                            </s:if>
                        <s:else>
                            <img src="<%=request.getContextPath()%>/images/paging/first_off.gif" alt="first">
                            &nbsp;
                            <img src="<%=request.getContextPath()%>/images/paging/prev_off.gif" alt="first">
                        </s:else>
                        </div>
                        <div style="float:left;">
                            <s:iterator var="i" begin="%{linkFirstNumber}" end="%{linkLastNumber}">
                                <s:if test="#i == page">
                                    <span class="pager_active">
                                        <s:property value="#i"/>
                                    </span>
                                </s:if>
                                <s:else>
                                     <a href="#" class="viewNextModelDevices pager">
                                       <s:property value="#i"/>
                                           <input type="hidden" name="page" value="<s:property value="#i"/>"  />
                                    </a>
                                </s:else>
                                <s:if test="!#st.last">,&nbsp;</s:if>
                            </s:iterator>
                        </div>
                        <div class="right-arrows">
                            <s:if test="%{hasNext()}">
                                 <a href="#" class="viewNextModelDevices">
                                    <img src="<%=request.getContextPath()%>/images/paging/next.gif" alt="first">
                                    <input type="hidden" name="page" value="<s:property value="%{page + 1}"/>"  />
                                </a>
                                &nbsp;
                                <a href="#" class="viewNextModelDevices">
                                    <img src="<%=request.getContextPath()%>/images/paging/last.gif" alt="first">
                                    <input type="hidden" name="page" value="<s:property value="maxPage"/>"  />
                                </a>
                            </s:if>
                            <s:else>
                                <img src="<%=request.getContextPath()%>/images/paging/next_off.gif" alt="first">
                                &nbsp;
                                <img src="<%=request.getContextPath()%>/images/paging/last_off.gif" alt="first">
                            </s:else>
                        </div>
                    </div>
                </div>
            </div>
        </s:if>
</s:if>
<s:else>
    There is no device
</s:else>
</s:if>
<s:else>
    <s:property value="result"    />
</s:else>