const Row = ({name, duration, limits, date, trainer_first_name, trainer_last_name, id, time, sign_up_users, is_sign_up}) =>
    <tr id ={id}>
        <td> {name}</td>
        <td> {duration}</td>
        <td>{limits-sign_up_users} / {limits}</td>
        <td> {date}</td>
        <td>{time}</td>
        <td>{trainer_first_name } {trainer_last_name} </td>
        <td>
            <JoinButton color={is_sign_up === 0 ? 'green': 'red' }
                        onClick={is_sign_up === 0 ? ()=>this.signUpUser({id, limits, sign_up_users}): ()=> {if (window.confirm('Jestes pewny, ze chcesz się wypisać z treningu?')) this.signOutUser({id})}}
                        name = {is_sign_up === 1 ? "opusc" : "dolacz"} />

        </td>
    </tr>


export default class WorkoutSchedule extends Component {
    constructor(props) {...}
    signUpUser = ({id, limits, sign_up_users})=> {...}
    getError =(response) => {...}
    signOutUser = ({id}) => {...}
    getWorkouts = () =>  {...}
    componentDidMount()  {...}
    render() {
        return(
            <div>
                { this.state.isError ?  <div className={"alert alert-danger"} role="alert">Brak miejsca na zajecia</div>   : " "}
                <p style={{textAlign: "left", fontSize: 50, color:"#37A6E0", marginTop:20 }}>Grafik zajec</p>
                <Table striped>
                    <thead>
                    <tr>
                        <th>Naza</th>
                        <th>Czas trwania</th>
                        <th>Limit miejsc</th>
                        <th>Data</th>
                        <th>Godzina</th>
                        <th>Trener</th>
                        <th>Akcje</th>
                    </tr>
                    </thead>
                    <tbody>
                    {this.state.workouts.map(this.Row)}
                    </tbody>
                </Table>
            </div>
        );
    }
}