<div class="ui inverted vertical footer segment">
  <div class="ui center aligned container">
    <div class="ui stackable inverted divided grid">
      <div class="four wide column">
        <p>
        Facultad de Ingenierías<br />
        Programa de Ingeniería de Sistemas y Computación<br />
        <b>Grupo de Investigación Sirius</b><br />
        </p>
        <p>
        Laboratorio Sirius HPC<br />
        <b><i>Oficina 3-003(R 003)</i></b><br />
        Laboratorio Sirius ITS<br />
        <b><i>Oficina 3-209(R 209)</i></b><br />
        </p>
      </div>
      <div class="four wide column">
        <p>
          <b>Director General</b><br />
          Juan David Hincapié Zea<br />
          <i>judaz@sirius.utp.edu.co</i><br />
        </p>
        <p>
          <b>Director Científico</b><br />
          John H. Osorio<br />
          <i>john@sirius.utp.edu.co</i><br />
        </p>
      </div>
      <div class="eight wide column">
        <form class="ui form" action="/admin/contact" method="post" onsubmit="return confirm('¿Está seguro de enviar el mensaje?')">
          <div class="field">
            <div class="two fields">
              <div class="field">
                <input type="text" name="footerName" placeholder="Nombres">
              </div>
              <div class="field">
                <input type="text" name="footerLast" placeholder="Apellidos">
              </div>
            </div>
          </div>
          <div class="field">
            <div class="field">
              <input type="text" name="footerEmail" placeholder="Correo Electrónico">
            </div>
          </div>
          <div class="field">
            <textarea style="margin-top: 0px; margin-bottom: 0px; height: 50px; resize: none;" name="footerText" placeholder="Mensaje"></textarea>
            <%# <input type="text" name="profession" placeholder="Ocupación">%>
          </div>
          <div class="ui submit button">Enviar</div>
        </form>
      </div>
    </div>
    <div class="ui inverted section divider"></div>
    <div class="ui center aligned container" style="padding: 30px 0 0;">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <img src="/images/sirius_title_w.svg" alt="Grupo Sirius" style="width: 100px;">
        <br />
        <a class="ui circular facebook icon button" href="https://facebook.com/siriushpc" target="_blank">
          <i class="facebook icon"></i>
        </a>
        <a class="ui circular twitter icon button" href="https://twitter.com/siriushpc" target="_blank">
          <i class="twitter icon"></i>
        </a>
        <a class="ui circular twitter icon button" href="https://twitter.com/SiriusITS" target="_blank">
          <i class="twitter icon"></i>
        </a>
        <a class="ui circular github icon button" href="https://github.com/labsirius" target="_blank">
          <i class="github alternate icon"></i>
        </a>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript" src="/js/scroll.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
<script type="text/javascript" src="/js/analytics.js"></script>
<script type="text/javascript">
$('.activating.element').popup();
</script>
<script type="text/javascript">
$('.button').popup({
  inline: true
});
</script>
<script type="text/javascript">
$('.message .close').on('click', function() {
  $(this).closest('.message').transition('fade');
});
</script>
<script>
$(document).ready(function() {
  $('.ui.form').form({
    fields: {
      username: {
        identifier: 'username',
        rules: [
          {
            type: 'empty',
            prompt: 'Please enter your username'
          }
        ]
      },
      user_id: {
        identifier: 'user_id',
        rules: [
          {
            type: 'empty',
            prompt: 'Please enter your id'
          }
        ]
      },
      name: {
        identifier: 'name',
        rules: [
          {
            type: 'empty',
            prompt: 'Please enter your name'
          }
        ]
      },
      last_name: {
        identifier: 'last_name',
        rules: [
          {
            type: 'empty',
            prompt: 'Please enter your last name'
          }
        ]
      },
      email: {
        identifier: 'email',
        rules: [
          {
            type: 'empty',
            prompt: 'Please enter your e-mail'
          },
          {
            type: 'email',
            prompt: 'Please enter a valid e-mail'
          }
        ]
      },
      profession: {
        identifier: 'profession',
        rules: [
          {
            type: 'empty',
            prompt: 'Please enter your profession'
          }
        ]
      },
      password: {
        identifier: 'password',
        rules: [
          {
            type: 'empty',
            prompt: 'Please enter your password'
          },
          {
            type: 'length[6]',
            prompt: 'Your password must be at least 6 characters'
          }
        ]
      },
      confirmPassword: {
        identifier: 'confirmPassword',
        rules: [
          {
            type: 'empty',
            prompt: 'Please enter your password'
          },
          {
            type: 'length[6]',
            prompt: 'Your password must be at least 6 characters'
          }
        ]
      },
      text: {
        identifier: 'text',
        rules: [
          {
            type: 'empty',
            prompt: 'Please enter your Text'
          }
        ]
      },
      footerEmail: {
        identifier: 'footerEmail',
        rules: [
          {
            type: 'empty',
            prompt: 'Please enter your e-mail'
          },
          {
            type: 'email',
            prompt: 'Please enter a valid e-mail'
          }
        ]
      },
      footerName: {
        identifier: 'footerName',
        rules: [
          {
            type: 'empty',
            prompt: 'Please enter your name'
          }
        ]
      },
      footerLast: {
        identifier: 'footerLast',
        rules: [
          {
            type: 'empty',
            prompt: 'Please enter your Last Name'
          }
        ]
      },
      footerText: {
        identifier: 'footerText',
        rules: [
          {
            type: 'empty',
            prompt: 'Please enter your message'
          }
        ]
      }
    }
  });
});
</script>
