<!-- Los import -->
<%@ page language="java" %>
<%@ page import = "java.sql.Connection"%>
<%@ page import = "java.sql.DriverManager"%>
<%@ page import = "java.sql.ResultSet"%>
<%@ page import = "java.sql.Statement"%>
<style type="text/css">
.teams_row1{ background-color:#f2d7cc}
.teams_row2{ background-color:#f5eede}
.calendar_container{font-size:12px; background-color:#ffffff;margin:0; padding:0}
.calendar_row{height:1.2em; margin:0; padding:0; float:left; width:100%}
</style>

<%
try
{
   // Conexion con bd
    String nombre1="";
    String nombre2="";
    String fecha="";
    String lugar="";
   Class.forName("org.gjt.mm.mysql.Driver");
   Connection conexion = DriverManager.getConnection("jdbc:mysql://172.30.61.7:3306/worldcupcalendar", "root", "");
   if (!conexion.isClosed())
   {
      // La consulta
      Statement st = conexion.createStatement();
      ResultSet rs = st.executeQuery("SELECT e2.nombre,e1.nombre,p.fecha, p.lugar FROM worldcupcalendar.partidos p INNER JOIN worldcupcalendar.equipos e1 ON p.visitante=e1.id INNER JOIN worldcupcalendar.equipos e2 ON p.local=e2.id LIMIT 0,7;" );
      // Ponemos los resultados en un table de html

      %><div id="table_container" class="calendar_container" style="width:100%"><%
      //out.println("<table style=background-color=pink>");
      while (rs.next())
      {
        nombre1=rs.getString("e2.nombre");
        nombre2=rs.getString("e1.nombre");
        fecha=rs.getString("p.fecha");
        lugar=rs.getString("p.lugar");

        %><div class="calendar_row">
            <div class="teams_row2" style="float:left;color:#000000;width:17%;">
                <div style="padding-left:5px;"><%=nombre1%></div>
            </div>
                <div style="float:left;color:#000000;width:0.39%;text-align:left;">&nbsp;</div>
                <div class="teams_row1" style="float:left;color:#000000;width:3.1%;text-align:center;">-</div>

                <div style="float:left;color:#000000;width:0.39%;text-align:left;">&nbsp;</div>
            <div class="teams_row2" style="float:left;color:#000000;width:18%;text-align:left;">
                <div style="padding-left:5px;"><%=nombre2%></div>
            </div>
                <div style="float:left;color:#000000;width:0.39%;text-align:center;">&nbsp;</div>
            <div class="teams_row2" style="float:left;color:#000000;width:25.3%;text-align:left;">
                <div style="padding-left:5px;"><%=fecha%></div>
            </div>
                <div style="float:left;color:#000000;width:0.39%;text-align:left;">&nbsp;</div>
            <div class="teams_row2" style="float:left;color:#000000;width:35%;text-align:left;">
                <div style="padding-left:5px;"><%=lugar%></div>
            </div>
            <div style="clear:both;"></div>
        </div> <%
     %></div> <%


     }
      // cierre de la conexion
      conexion.close();
   }
   else
   {
      // Error en la conexion
      out.println("fallo");
    }
}


catch (Exception e)
{
   // Error en algun momento.
   out.println("Excepcion "+e);
   e.printStackTrace();
}



%>