import React from 'react';
import 'react-bulma-components/dist/react-bulma-components.min.css';
import {
	Section,
	Heading,
	Columns,
	Card,
	Table,
	Button 
} from 'react-bulma-components';



class MemberPage extends React.Component {
	render()
	{
		const sectionStyle = {
			paddingTop: "3em",
			paddingBottom: "3em"
		};

		return (
			<Section size="medium" style={ sectionStyle }>
				<Heading>Members</Heading>
				<Columns>
					<Columns.Column size={4}>
						<Card>
							<Card.Header>
								<Card.Header.Title>Add Member</Card.Header.Title>
							</Card.Header>
							<Card.Content>
								<form>
									<div className="field">
										<label>First Name</label>
										<div className="control">
											<input class="input" type="text" />
										</div>
									</div>
									<div className="field">
										<label>Last Name</label>
										<div className="control">
											<input className="input" type="text" />
										</div>
									</div>
									<div className="field">
										<label>Position Name</label>
										<div className="control">
											<input className="input" type="text" />
										</div>
									</div>
									<div className="field">
										<label>Team</label>
										<div className="control">
										    <div className="select is-fullwidth">
										    	<select>
											        <option>Select Team</option>
											        <option>A team</option>
											        <option>B team</option>
											        <option>C team</option>
										      	</select>
										    </div>
										</div>
									</div>
									<Button className="button is-link is-success">
										Add
									</Button>
								</form>
							</Card.Content>
						</Card>
					</Columns.Column>
					<Columns.Column size={8}>
						<Card>
							<Card.Header>
								<Card.Header.Title>
									Member List
								</Card.Header.Title>
							</Card.Header>
							<Card.Content>
								<Table className="table is-fullwidth is-bordered is-striped is-hoverable">
									<thead>
										<th size={4}>Member Name</th>
										<th>Position</th>
										<th>Team</th>
										<th>Action</th>
									</thead>
									<tbody>
										<tr>
											<td>Sample</td>
											<td>Sample</td>
											<td>Sample</td>
											<td>Sample</td>
										</tr>
									</tbody>
								</Table>
							</Card.Content>
						</Card>
					</Columns.Column>
				</Columns>
			</Section>
		)
	}
}

export default MemberPage;