content: import React from 'react';
  import _ from 'lodash';
  import Radio from 'components/uiElements/Radio/Radio';
  import './staff-role.less';
  
  class StaffRole extends React.Component {
    constructor(...args) {
      super(...args);
      this.state = {};
    }
  
    render() {
      return (
        <div className="staff-role-wrapper">
          <section>
            <Radio value={'agent-restricted'} name={'agent-restricted'} active={this.props.permission} onChangeRadio={this.props.onPermissionsUpdated.bind(this)}>
              <span>
                <h4 className="bold">Restricted</h4>
                <h5 className="darkGray">Restricted Cannot manage their calendar (others must book appointments on their behalf). No access to Appointments Dashboard and Appointments App.</h5>
              </span>
            </Radio>
  
            <Radio value={'agent-self'} name={'agent-self'} active={this.props.permission} onChangeRadio={this.props.onPermissionsUpdated.bind(this)}>
              <span>
                <h4 className="bold">Self Access <span className="regular">- Ideal for single staff member.</span></h4>
                <h5 className="darkGray">View, accept and decline their own appointments and view their own calendars.</h5>
              </span>
            </Radio>
  
            <Radio value={'agent-staff'} name={'agent-staff'} active={this.props.permission} onChangeRadio={this.props.onPermissionsUpdated.bind(this)}>
              <span>
                <h4 className="bold">All Staff Access <span className="regular">- Ideal for the front desk.</span></h4>
                <h5 className="darkGray">Restricted Cannot manage their calendar (others must book appointments on their behalf). No access to Appointments Dashboard and Appointments App.</h5>
              </span>
            </Radio>
  
            <Radio value={'resource-admin'} name={'resource-admin'} active={this.props.permission} onChangeRadio={this.props.onPermissionsUpdated.bind(this)}>
              <span>
                <h4 className="bold">Full Access <span className="regular">- Ideal for partners.</span></h4>
                <h5 className="darkGray">Access to everything.</h5>
              </span>
            </Radio>
          </section>
          <section></section>
          <section></section>
        </div>
      );
    }
  }
  
  StaffRole.propTypes = {};
  
  export default StaffRole;
  