import React from 'react';
import {NavLink, Route, Switch, withRouter} from 'react-router-dom';
import {
  Page,
  Grid,
  List
} from "tabler-react";

import ContractContainer from '../containers/ContractContainer';

const ContractLayout = (props) => (
  <Grid.Row>
    <Grid.Col md={3}>
      <Page.Title className="my-5">Contract</Page.Title>
      <div>
        <List.Group transparent={true}>
          <List.GroupItem
            className="d-flex align-items-center"
            to="/embark/explorer/accounts"
            icon="users"
            RootComponent={withRouter(NavLink)}
          >
            Deployment / Utils
          </List.GroupItem>
          <List.GroupItem
            className="d-flex align-items-center"
            to="/embark/explorer/blocks"
            icon="book-open"
            RootComponent={withRouter(NavLink)}
          >
            Functions
          </List.GroupItem>
          <List.GroupItem
            className="d-flex align-items-center"
            to="/embark/explorer/transactions"
            icon="activity"
            RootComponent={withRouter(NavLink)}
          >
            Source Code
          </List.GroupItem>
          <List.GroupItem
            className="d-flex align-items-center"
            to={`/embark/contracts/${props.match.params.contractName}/profiler`}
            icon="server"
            RootComponent={withRouter(NavLink)}
          >
            Profile
          </List.GroupItem>
        </List.Group>
      </div>
    </Grid.Col>
    <Grid.Col md={9}>
      <Switch>
        <ContractContainer />
      </Switch>
    </Grid.Col>
  </Grid.Row>
);
        // <Route exact path="/embark/explorer/accounts" component={AccountsContainer} />
        // <Route exact path="/embark/explorer/blocks" component={BlocksContainer} />
        // <Route exact path="/embark/explorer/transactions" component={TransactionsContainer} />

export default withRouter(ContractLayout);

@@ -209,16 +209,95 @@
 tainer';
+%0Aimport ContractProfileContainer from '../containers/ContractProfileContainer';
 %0A%0Aconst 
@@ -1644,167 +1644,186 @@
    %3C
-ContractContainer /%3E%0A      %3C/Switch%3E%0A    %3C/Grid.Col%3E%0A  %3C/Grid.Row%3E%0A);%0A        // %3CRoute exact path=%22/embark/explorer/accounts%22 component=%7BAccountsContainer%7D /%3E
+Route exact path=%22/embark/contracts/:contractName/profiler%22 component=%7BContractProfileContainer%7D /%3E%0A        %3CContractContainer /%3E%0A      %3C/Switch%3E%0A    %3C/Grid.Col%3E%0A  %3C/Grid.Row%3E%0A);
 %0A   

add profiler to contract layout