import React, {PropTypes as T} from 'react'
import {Link} from 'react-router'
import {Card, CardActions, CardHeader, CardMedia, CardTitle, CardText} from 'material-ui/Card'
import FlatButton from 'material-ui/FlatButton'
import Avatar from 'material-ui/Avatar'
import {
  indigo900,
  deepOrange300
} from 'material-ui/styles/colors'

const styles = {
  card: {
    height: '100%'
  },
  avatar: {
    margin: 5
  }
}

const RouteCard = ({route: {ID, Description, TargetPort, ProxiedURL}}) => (
    <Card zDepth={1} style={styles.card}>
      <CardHeader
        title={ID}
        subtitle={Description || '<no description>'}
        avatar={
          <Avatar
            color={deepOrange300}
            backgroundColor={indigo900}
            size={30}
            style={styles.avatar}>{ID.charAt(0).toUpperCase()}</Avatar>
        }
      />
      <CardTitle title='Proxied URL' subtitle={ProxiedURL || '<none provided>'} />
      <CardText>
        Some other routey stuff.
      </CardText>
      <CardActions>
        <FlatButton label="Edit" />
      </CardActions>
    </Card>
)

RouteCard.displayName = 'RouteCard'

RouteCard.propTypes = {
  route: T.object.isRequired
}

export default RouteCard

@@ -254,16 +254,57 @@
 Avatar'%0A
+import Dialog from 'material-ui/Dialog'%0A%0A
 import %7B
@@ -458,26 +458,589 @@
 %7D%0A%0Ac
-onst RouteCard = (
+lass RouteCard extends React.Component %7B%0A%0A  constructor (props) %7B%0A    super(props)%0A    this.state = %7B%0A      editable: false%0A    %7D%0A  %7D%0A%0A  handleEdit = () =%3E %7B%0A    this.setState(%7Beditable: true%7D)%0A  %7D%0A%0A  handleDoneEdit = () =%3E %7B%0A    this.setState(%7Beditable: false%7D)%0A  %7D%0A%0A  render () %7B%0A    const actions = %5B%0A      %3CFlatButton%0A        label=%22Cancel%22%0A        primary=%7Btrue%7D%0A        onTouchTap=%7Bthis.handleDoneEdit%7D%0A      /%3E,%0A      %3CFlatButton%0A        label=%22Submit%22%0A        primary=%7Btrue%7D%0A        keyboardFocused=%7Btrue%7D%0A        onTouchTap=%7Bthis.handleDoneEdit%7D%0A      /%3E%0A    %5D%0A%0A    const 
 %7Brou
@@ -1089,15 +1089,37 @@
 RL%7D%7D
-)
  =
-%3E
+ this.props%0A    return
  (%0A
+  
     
@@ -1158,24 +1158,26 @@
 ard%7D%3E%0A      
+  
 %3CCardHeader%0A
@@ -1184,16 +1184,18 @@
         
+  
 title=%7BI
@@ -1195,18 +1195,39 @@
 itle=%7BID
-%7D%0A
+ + ':' + TargetPort%7D%0A  
         
@@ -1279,16 +1279,18 @@
         
+  
 avatar=%7B
@@ -1290,16 +1290,18 @@
 vatar=%7B%0A
+  
         
@@ -1322,16 +1322,18 @@
         
+  
 color=%7Bd
@@ -1342,24 +1342,26 @@
 pOrange300%7D%0A
+  
             
@@ -1400,16 +1400,18 @@
         
+  
 size=%7B30
@@ -1412,16 +1412,18 @@
 ze=%7B30%7D%0A
+  
         
@@ -1494,18 +1494,22 @@
         
-%7D%0A
+  %7D%0A  
       /%3E
@@ -1505,24 +1505,26 @@
 %0A        /%3E%0A
+  
       %3CCardT
@@ -1590,24 +1590,26 @@
 vided%3E'%7D /%3E%0A
+  
       %3CCardT
@@ -1621,16 +1621,18 @@
         
+  
 Some oth
@@ -1648,16 +1648,18 @@
  stuff.%0A
+  
       %3C/
@@ -1670,24 +1670,26 @@
 Text%3E%0A      
+  
 %3CCardActions
@@ -1694,24 +1694,26 @@
 ns%3E%0A        
+ 
+ 
 %3CFlatButton 
@@ -1725,19 +1725,343 @@
 =%22Edit%22 
-/%3E%0A
+onTouchTap=%7Bthis.handleEdit%7D/%3E%0A          %3CDialog%0A            title=%7B'Edit Route (' + ID + ')'%7D%0A            actions=%7Bactions%7D%0A            modal=%7Bfalse%7D%0A            open=%7Bthis.state.editable%7D%0A            onRequestClose=%7Bthis.handleDoneEdit%7D%0A          %3E%0A            Would you like to change the proxied URL?%0A          %3C/Dialog%3E%0A  
       %3C/
@@ -2081,16 +2081,18 @@
     
+  
 %3C/Card%3E%0A
 )%0A%0AR
@@ -2087,17 +2087,27 @@
 %3C/Card%3E%0A
-)
+    )%0A  %7D%0A%7D
 %0A%0ARouteC

add modal