import React, { Component } from "react";
import styled from "styled-components";

import { Row, RowContent, ColumnContainer } from "../SharedComponents.js";

import Loading from "../loading.js";

import List from "./List.js";
import CreateList from "./CreateList.js";
import Notes from "./Notes.js";

class ListsView extends Component {
  render() {
    const { user, lists, loading } = this.props;

    if (loading) {
      return <Loading />;
    }

    return (
      <ColumnContainer>
        <Row>
          <RowContent>
            Du är: {user.nick}
          </RowContent>
        </Row>

        <MainContainer>
          <ListContainer width={(lists.length - 2) * 20}>
            {lists.map((list, i) => <List key={list.id} list={list} user={user} inactive={i < lists.length - 1} />)}
          </ListContainer>
          {user.isAdmin && <CreateList />}
          <Notes />
        </MainContainer>
      </ColumnContainer>
    );
  }
}

const ListContainer = Row.extend`
  margin-left: -${props => props.width}em;
`;

const MainContainer = styled(Row)`
  padding-top: 2em;
`;

export default ListsView;

@@ -644,16 +644,23 @@
 ner 
-width
+numberOfLists
 =%7B
-(
 list
@@ -671,19 +671,10 @@
 ngth
- - 2) * 20
 %7D
+ 
 %3E%0A  
@@ -1007,20 +1007,138 @@
  =%3E 
+(
 props.
-width%7D
+numberOfLists - 2) * 20%7Dem;%0A  align-self: $%7Bprops =%3E (props.numberOfLists %3E 1) ? 'flex-end' : 'center'%7D;%0A  margin-bottom: 2
 em;%0A
@@ -1167,19 +1167,18 @@
 r = 
-styled(Row)
+Row.extend
 %60%0A  
@@ -1190,24 +1190,171 @@
 ng-top: 2em;
+%0A%0A  @media (min-width: 900px) %7B%0A    flex-direction: row;%0A  %7D%0A  @media (max-width: 900px) %7B%0A    flex-direction: column;%0A    align-items: center;%0A  %7D
 %0A%60;%0A%0Aexport 

Make Lists view mobile friendly