import React, { Component } from "react";
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';

class EditUser extends Component {
    render() {
        return (
            <div id="UserManagementPageEditComponent" style={{ display: 'flex', justifyContent: 'center', textAlign: 'left' }}>
                <Form style={{ width: '60rem' }}>
                    <Form.Group className="mb-3">
                        <Form.Label>User-ID</Form.Label>
                        <Form.Control id="EditUserComponentEditUserID" type="text" disabled="true" />
                        <Form.Text className="text-muted">
                            Die User-ID kann nicht geändert werden.
                        </Form.Text>
                    </Form.Group>

                    <Form.Group className="mb-3">
                        <Form.Label>Vorname</Form.Label>
                        <Form.Control id="EditUserComponentEditFirstName" type="text" placeholder="Bitte Vornamen eingeben" />
                    </Form.Group>

                    <Form.Group className="mb-3">
                        <Form.Label>Nachname</Form.Label>
                        <Form.Control id="EditUserComponentEditLastName" type="text" placeholder="Bitte Nachnamen eingeben" />
                    </Form.Group>

                    <Form.Group className="mb-3" controlId="formBasicPassword">
                        <Form.Label>Passwort</Form.Label>
                        <Form.Control id="EditUserComponentEditPassword" type="password" placeholder="Bitte Passwort eingeben" />
                        <Form.Text className="text-muted">
                            Wenn das Passwort gesetzt wird, wird es im Backend geändert!
                        </Form.Text>
                    </Form.Group>

                    <Form.Group className="mb-3" controlId="formBasicCheckbox">
                        <Form.Check id="EditUserComponentEditIsAdministrator" type="checkbox" label="Administrator-Rechte" style={{color: '#0eb30e'}} />
                    </Form.Group>
                    <Button id="OpenUserManagementPageListComponentButton" variant="primary" type="submit">
                        Speichern
                    </Button>
                </Form>
            </div >
        )
    }
}

export default EditUser