import { useState } from 'react' import Link from 'next/link' import { useLoading } from 'next-on-rails/utils' import { getInitialResource, useResources } from 'next-on-rails/resources'

import Flash from '../../components/flash' import <%= controller_class_name %>Details from '../../components/<%= plural_table_name %>/details'

const <%= controller_class_name %>Show = props => {

const loading = useLoading()
const [, <%= singular_table_name.camelize(:lower) %>] = useResources('<%= plural_table_name.camelize(:lower) %>', props.<%= plural_table_name.camelize(:lower) %>, props.<%= singular_table_name.camelize(:lower) %>)

return (
  <div>
    <div className="position-absolute">{loading ? 'Loading...' : null}</div>
    <div className="container pt-4">
      <Flash />
      <h1 className="mb-5"><%= class_name.titleize %> #{<%= singular_table_name.camelize(:lower) %>.id}</h1>

      <<%= controller_class_name %>Details <%= singular_table_name.camelize(:lower) %>={<%= singular_table_name.camelize(:lower) %>} />

      <hr />

      <ul className="nav">
        <li className="nav-item">
          <Link href="/<%= plural_table_name %>">
            <a className="nav-link">List <%= controller_class_name.titleize %></a>
          </Link>
        </li>
        <li className="nav-item">
          <Link href={`/<%= plural_table_name %>/edit?id=${<%= singular_table_name.camelize(:lower) %>.id}`} as={`/<%= plural_table_name %>/${<%= singular_table_name.camelize(:lower) %>.id}/edit`}>
            <a className="nav-link">Edit</a>
          </Link>
        </li>
      </ul>
    </div>
  </div>
)

}

<%= controller_class_name %>Show.getInitialProps = getInitialResource('<%= singular_table_name.camelize(:lower) %>')

export default <%= controller_class_name %>Show