import React from 'react';
import { Table, Row, Col, Button, Form, Dropdown, DropdownButton, Breadcrumb } from 'react-bootstrap';
import { Link } from 'react-router-dom';

const ExerciseDetail = () => {
  return (
    <div className='admin-teachers'>
        <Row className='mb-45'>
            <Col className="d-flex align-items-center breadcrumb-con">
                <Button as={Link} className='btn btn-blue btn-square-back' to='/admin/exercise'>
                    <i className="bi bi-arrow-90deg-left"></i>
                </Button>
                <Breadcrumb className='custom-breadcrumb'>
                    <Breadcrumb.Item href="#">Academic</Breadcrumb.Item>
                    <Breadcrumb.Item href="/admin/exercise" className='text-capitalize'>Exercise</Breadcrumb.Item>
                    <Breadcrumb.Item active>Exercise Details</Breadcrumb.Item>
                </Breadcrumb>
            </Col>
        </Row>
        <Row className='mb-45'>
            <Col>
                <div className="cards">
                    <div className="cards-title">
                        <h4>Class A</h4>
                    </div>
                    <div className="cards-body">
                        <div className="d-flex">
                            <Form.Control
                                aria-label="Large"
                                aria-describedby="inputGroup-sizing-sm"
                                placeholder='Search'
                                className='table-input-search'
                            />
                            <DropdownButton title="Sort by" variant='ts'>
                                <Dropdown.Item href="#/action-1">NISN</Dropdown.Item>
                                <Dropdown.Item href="#/action-2">Student Name</Dropdown.Item>
                            </DropdownButton>
                        </div>
                        <Table hover>
                            <thead>
                            <tr>
                                <th>No</th>
                                <th>NISN</th>
                                <th>Student Name</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>1</td>
                                <td>9075550101</td>
                                <td>Courtney Henry</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>4055550128</td>
                                <td>Eleanor Pena</td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>2095550104</td>
                                <td>Annette Black</td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>4065550120</td>
                                <td>Marvin McKinney</td>
                            </tr>
                            <tr>
                                <td>5</td>
                                <td>7045550127</td>
                                <td>Leslie Alexander</td>
                            </tr>
                            </tbody>
                        </Table>
                    </div>
                </div>
            </Col>
        </Row>
    </div>
  );
};

export default ExerciseDetail;
