<div class = "text-center">
    <h1>Utilizadores</h1>
</div>
<div class="container-fluid">
    <div class = "jumbotron">
        <div class="row" style="text-align: center;flex-wrap:wrap; align-content: center;">
            <?php foreach ($users as $user): ?>
                <div class="col-md-3" style = "width:150px;" id = "column">
                    <a href = '<?php echo $this->Url->build(['action' => 'login'])?>' onclick="getName('<?php echo $user->username; ?>', '<?php echo $user->user_id; ?>');">
                        <img src="img/user-img.png" style="width: 80px;">
                    </a>
                    <p><?php echo $user->username; ?></p>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" style = "display: none;">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <p>Login</p>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" style = "background-color:transparent; border: none; color: red;">
                    <span aria-hidden="true" style = "font-size:20px;">&times</span>
                </button>
            </div>
            <div class="modal-body">
                <?php $this->Flash->render('auth') ?>
                <p>Utilizador</p>
                <?php $this->Form->create(); ?>
                <?php echo $this->Form->input('nome', array('type' => 'text', 'placeholder' => 'Nome', 'required' => true, 'id' => 'nome_input', 'readonly')); ?>
                <p>Senha</p>
                <?php echo $this->Form->input('pass', array('type' => 'password', 'placeholder' => 'Password', 'required' => true)); ?>
            </div>
            <div class="modal-footer">
                <?php echo $this->Form->submit(__('Login')); ?>
                <?php echo $this->Form->end(); ?>
            </div>
        </div>
    </div>
</div>

<script>
    function getName(nome, id){
        document.getElementById("nome_input").value = nome;

    }
</script>
