import React from "react"
import { Link, graphql } from "gatsby"
import Layout from "../components/layout"
import "../styles/main.css"

const AboutPage = ({data}) => (
    <Layout>
        <h1 style = {{marginTop: `20px`}}>Группа методики ядерно-физического эксперимента</h1>
        <p style = {{marginTop: `0px`}}>
        Группа была создана в 2015 году на базе кафедры общей физики МФТИ, нескольких лабораторий ИЯИ РАН и при поддержке лаборатории физики высоких энергий МФТИ.
        Цель создания - разработка методов для проведения и анализа данных экспериментов в области физики частиц и ядерной физики.
        Помимо этого участники группы занимаются внедрением современных информационных технологий в экспериментальную физику и образование.
        </p>

        <h2 id="publications">Публикации</h2>
        <p style = {{marginTop: `0px`, marginBottom: `0px`}}>Публикации группы доступны на <Link to="./publications">отдельной странице.</Link></p>

        <h2 id="contacts">Контактная информация</h2>
        <p style = {{marginTop: `0px`, marginBottom: `0px`}}>Электронный адрес: <a href='mailto&#58;&#110;p&#109;&#64;m%&#54;&#57;%70&#116;&#46;ru'>npm&#64;mip&#116;&#46;ru</a></p>
        <p style = {{marginTop: `0px`}}>Телеграм канал: <a href="https://t.me/mipt_npm">https://t.me/mipt_npm</a></p>

    {/* ------------------------------ */}

    { data.members.nodes.map(member => {
      const name = member.frontmatter.title;
      const photo = member.frontmatter.photo;
      const path = "../../images/members/"
      if (photo === null)
        return(
          <div>
          <hr/>
            <div className = "row">
                <div className = "col-lg-2"></div>
                <div className = "col-lg-10">
                    <h2>{name}</h2>
                    <p
                    dangerouslySetInnerHTML = {{
                        __html: member.html,
                        }}
                    />
                </div>     
            </div>
          </div>  
        )
      else
      return (
          <div>
          <hr/>
            <div className = "row">
                <div className = "col-lg-2">
                    <img src={path+photo} alt=" "/>
                </div>
                <div className = "col-lg-10">
                    <h2>{name}</h2>
                    <p
                    dangerouslySetInnerHTML = {{
                        __html: member.html,
                        }}
                    />
                </div>     
            </div>
          </div>
      )
    })}
    </Layout>
)

export default AboutPage

export const query = graphql`
query {
    members: allMarkdownRemark(filter: {frontmatter: {content_type: {eq: "member"}, published: {eq: true}}}, 
            sort: {fields: frontmatter___order, order: ASC}) {
      nodes {
        html
        frontmatter {
          title
          photo
        }
      }
    }
}`