content: import React from 'react';
  import {Link, browserHistory} from 'react-router';
  import FloatingActionButton from 'material-ui/FloatingActionButton';
  import ModeEdit from 'material-ui/svg-icons/editor/mode-edit';
  import TextField from 'material-ui/TextField';
  import axios from 'axios';
  import {getBranchName} from '../../functions/BranchesFuncs';
  
  import styled from 'styled-components';
  
  import Avatar from '../icons/userprofile.jpg';
  
  const InnerUserCard = styled.div`
    suplibackground: #fff;
    min-height: 292px;
    margin-top: 20px;
    transition: opacity 0.5s;
    background-size: cover;
    position: relative;
    padding: 10px 40px;
  
  
    p {
      font-size: 12px;
      margin: 0px;
      padding: 2px 10px;
      text-align: left;
      color: #fff;
  
    }
  
    .edit_mode {
      min-height: 292px !importent;
      transition: opacity 0.5s;
    }
  
    .footer {
      color: #333333;
      text-align: center;
      position: absolute;
      bottom: 0;
      right: 0;
      left: 0;
      background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.64) 99%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
      background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.64) 99%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.64) 99%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
    }
    h2 {
      margin: 0;
      display: block;
      text-align: left;
      font-size: 15px;
      color: #ffffff;
      margin-bottom: 10px;
      padding-top: 20px;
      padding-left: 12px;
    }
  
    &:hover {
      box-shadow: 0px 0px 11px #d6d6d6;
    }
  `;
  
  const UserCardEdit = styled.div`
    padding: 10px 40px;
    border-radius: 4px;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.12), 0px 3px 6px rgba(0, 0, 0, 0.23);
    background: #fff;
    min-height: 292px;
    margin-top: 20px;
    transition: opacity 0.5s;
  
    .header {
      padding: 10px 20px 30px 10px;
      display: inline-block;
      float: left;
      border-right: 2px dashed #EEEEEE;
      background: #FFFFFF;
      color: #000000;
      text-align: center;
      -webkit-animation: moveIn 1s 3.1s ease forwards;
      animation: moveIn 1s 3.1s ease forwards;
      width: 50%;
    }
  
    img {
      width: 60px;
      max-width: 100%;
      -webkit-border-radius: 50%;
      border-radius: 50%;
      -webkit-transition: -webkit-box-shadow 0.3s ease;
      transition: box-shadow 0.3s ease;
      -webkit-box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.06);
      box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.06);
    }
  
    p {
      font-family: 'Open Sans';
      text-align: center;
      font-size: 13px;
      margin: 0px;
      padding: 2px 10px;
  
    }
  
    .edit_mode {
      min-height: 180px !importent;
      transition: opacity 0.5s;
    }
  
    .footer {
      float: right;
      background: #FFFFFF;
      color: #333333;
      text-align: center;
      width: 50%;
      padding: 15px;
    }
    h2 {
      margin: 0;
      display: block;
      text-align: center;
      font-size: 15px;
      color: #00a699;
      margin-bottom: 10px;
      padding-top: 20px;
    }
  
    &:hover {
  
    }
  `;
  
  export default class UserCard extends React.Component {
  
  	constructor(props) {
  		super(props);
  	}
  
  	go() {
  		browserHistory.push('/user/' + this.props.user.UserId);
  	}
  
  	render() {
  		const imgURL = Avatar;
  		return (
        <div className="col-md-3" >
          <Link onClick={this.go.bind(this)}>
            <InnerUserCard style={{backgroundImage: 'url(' + imgURL + ')'}}>
              <div className="footer">
                <h2> {this.props.user.Nickname}            </h2>
                <h2> {this.props.user.Nickname}            </h2>
                <p> Email: <b>{this.props.user.UserName}</b> </p>
                <p> Branch: <b>{getBranchName(this.props.user.BranchId)}</b> </p>
                <p >Admin: <b>{(this.props.user.IsAdmin == 1) ? 'Yes' : 'No'}</b></p>
              </div>
            </InnerUserCard>
          </Link>
        </div>
  		);
  	}
  
  }
  