import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

class user_page extends Component {
  render() {
    return (
      <div className="App">
      <div className="container my-auto" >

       <div className="row">

           <div className="col-lg-8 mx-auto">

               <FontAwesomeIcon icon="fa-user-circle" className="far fa-user-circle fa-5x mt-5 mb-3" style{{color: #6B6B6B}}></i>

               <p></p>
               <p></p>
               <p></p>

               <form className="mb-5">


                   <div class="form-group">
                       <label style={{font-family: Arial}} className="text-black-50">Nome de Utilizador</label>
                       <input style={{background-color: #E5E3E3; border-radius: 15px; max-width: 300px; font-family: Arial}} type="text" className="form-control mx-auto" id="input_nome_pag_user" aria-describedby="emailHelp" placeholder="Nome" disabled>
                       <small id="emailHelp" className="form-text text-muted"></small>
                   </div>


                   <div className="form-group">
                       <label style={{font-family: Arial}} className="text-black-50">Nome Completo</label>
                       <input style={{background-color: #E5E3E3; border-radius: 15px; max-width: 300px; font-family: Arial}} type="text" className="form-control mx-auto" id="input_username_pag_user" placeholder="Username" disabled >
                   </div>


                   <div class="form-group">
                       <label style={{font-family: Arial}} className="text-black-50">Email</label>
                       <input style={{background-color: #E5E3E3; border-radius: 15px; max-width: 300px; font-family: Arial}} type="email" className="form-control mx-auto" id="input_password_email_user" placeholder="Email" disabled >
                   </div>


                   <div class="form-group">
                       <label style={{font-family: Arial}} className="text-black-50">Password</label>
                       <input style{{background-color: #E5E3E3; border-radius: 15px; max-width: 300px; font-family: Arial}} type="text" className="form-control mx-auto" id="input_password_pag_user" placeholder="Password" disabled >
                   </div>

                   <br>


                   <button type="button" className="btn mx-auto" style={{background-color: #233656; border-color: #233656; color: white; margin: 5px; max-width: 200px}} id="btn_edit_dados_pag_user">Editar Dados</button>

                   <br>


                   <button type="button" className="btn mx-auto" style={{background-color: #233656; border-color: #233656; color: white; margin: 5px; max-width: 200px}} id="btn_termina_sessao_pag_user">Terminar Sessão</button>

               </form>

           </div>
       </div>
   </div>
      </div>
    );
  }
}